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 @   海乐学习  阅读(373)  评论(0编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)
历史上的今天:
2011-07-07 C++ 错误:const char [10]”转换为“const wchar_t
点击右上角即可分享
微信分享提示