react处理object中的map集合

2017-12-29  本文已影响0人  嗨_等风来

对于数组和object对象的数据获取,react是比较容易获取的,但是前段时间开发过程中遇到过map集合的数据,数据格式如下:

  list={
    "id": 1,
     actions:{ 
     "create": {
        "id": null,
        "level": 1,
        "name": null,
        "description": "新建",
        "label": "create",
        "url": "user/abc/123",
        "method": "GET"
      },
      "delete": {
        "id": null,
        "level": 1,
        "name": null,
        "description": "删除",
        "label": "delete",
        "url": "user/abc/123",
        "method": "DELETE"
   }
  }
  }

当然这是简化后的数据。
对于这种对象的获取其实直接通过list.actions.create和list.actions.delete是可以获取到的,但是我们从后台获取到数据后并不能确定map中的key值,以及map的个数。

1.对于这种map的操作我们是可以获取到所有actions中的key值的

var ar=_.keys(list.acctions)

此方法返回的是一个数组

['create','delete']

但是直接遍历这个集合,通过获取到的key来取对应的value值是获取不到的,返回udefiend
2.有一种更简单的方法我们可以直接得到map中的value

 const actions=list.actions;
 const usableFunctionDataList = _.map(actions, (data) => data)

返回的数据如下:

actions =  { 
     "create": {
        "id": null,
        "level": 1,
        "name": null,
        "description": "新建",
        "label": "create",
        "url": "user/abc/123",
        "method": "GET"
      },
      "delete": {
        "id": null,
        "level": 1,
        "name": null,
        "description": "删除",
        "label": "delete",
        "url": "user/abc/123",
        "method": "DELETE"
   }
  };
usableFunctionDataList :[{ 
        "id": null,
        "level": 1,
        "name": null,
        "description": "新建",
        "label": "create",
        "url": "user/abc/123",
        "method": "GET"
},{ 
      "id": null,
        "level": 1,
        "name": null,
        "description": "删除",
        "label": "delete",
        "url": "user/abc/123",
        "method": "DELETE"
}]

最终把value转换成了数组,就可以遍历取数据了

上一篇下一篇

猜你喜欢

热点阅读