根据数据条目个数自动生成html代码，并嵌入自己的数据

根据数据条目自动生成html代码，并嵌入自己的数据 1、关键词：JavaScript，html，ajax，json，springboot项目 2、内容概括：现有JSON数据，将数据渲染到网页中，根据数据条目自动生成一样的div ，并嵌入自己的数据。 3、大致效果如下：（生成类似于反馈的条目）

---

具体实现：

---

1、JSON数据处理（接口导出的json数据–TXC）：

• json数据解析：将JSON数据的对应属性名的值，放入到四个数组中 rply[i]、usercontent[i]、creatTime[i]、nickName[i]
• 再将这些数组 放到map中，并返回map格式的数据————map数据的格式就类似于{[],[],[],[]}————可以根据对应的map的属性名称调用对应的数组

public class JSON_advice {
    public static String[] rply;
    public static String[] usercontent;
    public static String[] creatTime;
    public static String[] nickName;
    public  static  Map map ;
    public static Map Advice() throws IOException {
        rply=new String[50];
        usercontent=new String[50];
        creatTime=new String[50];
        nickName=new String[50];
        map= new HashMap();
        String fileName = "C:\Users\stype\Desktop\json.txt";
        String s = Files.readString(Paths.get(fileName));
        JSONObject jsonObject = JSONObject.parseObject(s); //转为json
        JSONArray jsonData=jsonObject.getJSONArray("data");
        for (int i = 0; i < jsonData.size(); i++) {
            JSONObject data= jsonData.getJSONObject(i);
            String nick_username=data.getString("nick_name");
            String content=data.getString("content");
            String replies=data.getString("replies");
            String creattime=data.getString("created_at");
            JSONObject repliesData = JSONObject.parseObject(replies);
            JSONObject selfData=(JSONObject) repliesData.values().toArray()[0];//obj转数组
            JSONObject self1 = JSONObject.parseObject(selfData.getString("self"));
            String rely=self1.getString("content");
            rply[i]=rely;
            usercontent[i]=content;
            creatTime[i]=creattime;
            nickName[i]=nick_username;
        }
        map.put("rply",rply );
        map.put("usercontent",usercontent );
        map.put("creatTime",creatTime );
        map.put("nicksName",nickName );
        return map;
    }

2、controller层代码：

• 这个映射方法 time_test 是用来响应页面内的ajax 的 url
• 并给页面中的ajax返回数据（map类型的数据）

    public  static Map map ;
    @RequestMapping(value = "time_test")
    @ResponseBody
    public Map timeTest(HttpSession session) throws IOException {
        map= new HashMap();
        JSON_advice json_advice=new JSON_advice();
        map=json_advice.Advice();
        String[] value = map.get("rply");//测试
        System.out.println(value[0]); //测试
        return map;
    }

3、前端页面代码：

• 自动生成代码——是在js中用 createElement(“div”) 和 div.innerHTML 和 appendChild(div);
• div.innerHTML的内容是进行拼接—— 拼接时 一对<>用 一对‘ ’引住 （和模板一样）
• 注意：生成的每个div的id不能一样，id唯一，代码内加了i变量做区分
• ajax返回map格式的数据 也要注意一下，在解析返回的mapper数据时 应该使用 var usercontent=map[“usercontent”]; 这样的格式，不要用.get()

  
  
  
  
  
  
  
  



  



    

      
      XXX    XXX

      反馈信息: XXXXX

      回复信息: XXXXXXXX
    

      
  

  

4、浏览器后台生成的代码：

5、总结： 难点（我认为的，俺是菜狗）： 1、处理json数据-----这个json数据有点奇怪，感兴趣的可以自己看一下，他的属性名是不一样的id号，json对象套json对象------处理方法上面有了。打点values().toArray()[0] 之前 不知道json对象可以通过这样转化为json数组，这样就可以通过json数组遍历获得需要的对象，而不是通过json对象的属性名获取。 数据链接：https://blog.csdn.net/qq_46538141/article/details/124318919?utm_source=app&app_version=5.3.1&code=app_1562916241&uLinkId=usr1mkqgl919blen 2、返回类型选择----拿到三组数据，选择map类型的易于操作。 3、JavaScript内代码，拿map数据的格式，不知道有没有其他的办法。 4、这个没有用到数据库，因为导出的数据到文件了。

(这个图片排版怎么这么垃，导入进来的都乱了)