js获取遍历后台传过来的map对象

1.后台代码

public ModelMap totalWechatData(){
    ModelMap map =new ModelMap();
    //1.查询发布日期热度词
   String xaxisData[]={"wechat_pulbic_num","webpage_wechat","webpage_pic","image_search"};
   List<WechatTotalDomain> yzxisDataList=new ArrayList<WechatTotalDomain>();
  Map<String,List<Integer>> dataMap=new HashMap<String,List<Integer>>();
   for(int k=0;k<xaxisData.length;k++){
       if(k==0){
           List<Integer> list1=new ArrayList<Integer>();
           list1.add(4804);
           list1.add(1444);
           list1.add(1332);
           list1.add(890);
           dataMap.put(xaxisData[k],list1);
       }
       if(k==1){
           List<Integer> list1=new ArrayList<Integer>();
           list1.add(5506);
           list1.add(1674);
           list1.add(456);
           list1.add(990);
           dataMap.put(xaxisData[k],list1);
       }
       if(k==2){
           List<Integer> list1=new ArrayList<Integer>();
           list1.add(6040);
           list1.add(1823);
           list1.add(1484);
           list1.add(1116);
           dataMap.put(xaxisData[k],list1);
       }
       if(k==3){
           List<Integer> list1=new ArrayList<Integer>();
           list1.add(6311);
           list1.add(1902);
           list1.add(1745);
           list1.add(1215);
           dataMap.put(xaxisData[k],list1);
       }

   }
    map.put("xaxisData",xaxisData);
    map.put("yzxisdataMap",dataMap);
    return map;
}

前台遍历:

$.post("wechat_report/totalWechatData",{}, function (data, status) {

    var xhotData=data.xaxisData;
    var yhotData=data.yzxisdataMap;
    alert(  Object.getOwnPropertyNames(yhotData).length);
    /**  方式一
    for(var k in yhotData){
        alert("key名称是:"+k+",key的值是:"+yhotData[k]);
    }
     **/
    for(var k=0;k<Object.getOwnPropertyNames(yhotData).length;k++ ){
        alert("keys名称是:"+xhotData[k]+",keys的值是:"+yhotData[xhotData[k]]);
    }
});

3.获取长度:

Object.getOwnPropertyNames(yhotData).length

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
对于从后台获取到的 Map 类型的数据,我们可以将其转换为数组或对象类型,然后在 Vue 中使用 `v-for` 指令进行渲染。 具体的实现步骤如下: 1. 在 Vue 实例中定义一个 data 属性,用于存储后台返回的 Map 类型数据。 ```javascript data() { return { mapData: new Map() // 存储后台返回的 Map 类型数据 } } ``` 2. 在获取后台返回的 Map 类型数据后,将其转换为数组或对象类型,方便在 Vue 中渲染。 例如,将 Map 转换为数组类型: ```javascript axios.get('/api/map').then(res => { this.mapData = Array.from(res.data) // 将后台返回的 Map 类型数据转换为数组类型,并赋值给 data 中的 mapData 属性 }) ``` 3. 在页面中通过 `v-for` 指令循环遍历数组或对象,并将数据渲染到页面上。 例如,将数组类型的 Map 数据转换为对象类型: ```javascript computed: { mapObject() { return Object.fromEntries(this.mapData) // 将数组类型的 Map 数据转换为对象类型 } } ``` ```html <ul> <li v-for="(value, key) in mapObject" :key="key">{{ key }}: {{ value }}</li> </ul> ``` 在上述代码中,`v-for` 指令遍历 `mapObject` 对象中的每个属性,并将其渲染为一个列表项。 4. 在需要将 Map 中的属性赋值给 HTML 元素的属性时,使用 `v-bind` 指令或简写的冒号语法。 例如,将 Map 中的图片路径赋值给 `img` 标签的 `src` 属性: ```html <ul> <li v-for="(value, key) in mapObject" :key="key"> <img :src="value.imgUrl" alt=""> <span>{{ key }}: {{ value.name }}</span> </li> </ul> ``` 在上述代码中,`v-bind` 指令将 `value.imgUrl` 赋值给 `img` 标签的 `src` 属性。 以上就是在 Vue 中从后台拿到 Map 类型数据并将其转换为数组或对象类型,然后进行渲染的基本实现方法。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值