vue 向服务器端请求得到 json数组 赋到列表中

前端的 json对象数组

tableData: [
        {
          id: '100', classify: '分类一', name: '刘加料', phone1: '1381111111', phone2: '12877777',
          address: '中国', remark: '备注2',  operation: ''
        },
        {
          id: '101', classify: '分类二', name: '王国为', phone1: '1392222222', phone2: '12888888888',
          address: '中国', remark: '备注1',  operation: ''
        },
        {
          id: '102', classify: '分类一', name: '刘辚中', phone1: '1392274422', phone2: '12887777788',
          address: '中国', remark: '备注1',  operation: ''
        }]

从服务端请求得到的 json字符串 ,服务器端为 Java

String jsonStr = "[{'id':'100','name':'刘加料', 'phone1':'111112222', 'phone2': '12877777','address': '中国', 'remark': '备注2', 'operation': ''},{'id':'101','name':'张另国', 'phone1':'55566777', 'phone2': '13745345','address': '加格达奇', 'remark': '备注2', 'operation': ''}";
jsonStr=jsonStr+",{'id':'102','name':'王画国', 'phone1':'55566777', 'phone2': '13745345','address': '加格达奇', 'remark': '备注2', 'operation': ''}] ";
 
 return  jsonStr;

在浏览器中得到的 json字符串

[{'id':'100','name':'刘加料', 'phone1':'111112222', 'phone2': '12877777','address': '中国', 'remark': '备注2', 'operation': ''},{'id':'101','name':'张另国', 'phone1':'55566777', 'phone2': '13745345','address': '加格达奇', 'remark': '备注2', 'operation': ''},{'id':'102','name':'王画国', 'phone1':'55566777', 'phone2': '13745345','address': '加格达奇', 'remark': '备注2', 'operation': ''}]

vue 请求代码

//查询
onSelect() {
      console.log('onSelect 查询 ' + this.selectForm.name +" " + this.selectForm.phone);
      var url = 'http://192.168.1.143:5011/httpCli?action=query'+"&name="+this.selectForm.name+"&phone="+this.selectForm.phone ;
      this.$http.get(url).then((result) => {
        console.log(result);
        console.log(result.data);
 
        //var jsonArrStr = '[{"id":"100","name":"刘加料", "phone1":"111112222", "phone2": "12877777","address": "中国", "remark": "备注2", "operation": ""},{"id":"101","name":"张另国", "phone1":"55566777", "phone2": "13745345","address": "加格达奇", "remark": "备注2", "operation": ""}';
        //jsonArrStr=jsonArrStr+',{"id":"102","name":"王画国", "phone1":"55566777", "phone2": "13745345","address": "加格达奇", "remark": "备注2", "operation": ""} ]';   
       
        //将字符串 转为 json对象 数组
        //var jsonArr = JSON.parse(jsonArrStr);//  JSON.parse要求 json格式 严格
        //var jsonArr = JSON.parse(result.data);//从后端 得到的 json
        var jsonArr =eval('(' + result.data + ')');//eval对 json格式要求低

        var tempData={"list":[]};  //临时对象
        for(var i=0,l=jsonArr.length;i<l;i++){
            tempData.list.push(jsonArr[i]);  //将 json对象 按格式要求 赋给 页面的 json数据对象
            //for(var key in jsonArr[i]){
                //alert(key+':'+jsonArr[i][key]);
                //console.log(key+':'+jsonArr[i][key]); 
            //}
        }
         
        this.tableData=tempData.list;//赋给 页面的 json数据对象
        console.log(this.tableData.length);
        this.ListLoadData();
       
      }).catch((err) => {
        console.log(err)
      })
       
 },

 

posted @ 2022-07-07 11:12  海乐学习  阅读(357)  评论(0编辑  收藏  举报