美文网首页
react处理object中的map集合

react处理object中的map集合

作者: 嗨_等风来 | 来源:发表于2017-12-29 14:24 被阅读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转换成了数组,就可以遍历取数据了

    相关文章

      网友评论

          本文标题:react处理object中的map集合

          本文链接:https://www.haomeiwen.com/subject/gsmigxtx.html