react处理object中的map集合

对于数组和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转换成了数组,就可以遍历取数据了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容