javascript - 将 json 对象转换为数组以使用 Javascript 遍历 ng-repeat?

标签 javascript angularjs arrays json

<分区>

这是我的示例 json,我从 firebase 获取我的 json obj 我必须将列表转换为数组以通过 ng-repeat 绑定(bind)到 html 中。

我的 Json 对象是

  {
  "cats1": {
    "Name": "cricket",
    "imgUrl": "some url",
    "list1": {
      "bat": {
        "Name": "bat",
        "imgUrl": "some url",
        "price": "$100"
      },
      "pads": {
        "displayName": "pads",
        "imgUrl": "some url",
        "price": "$50"
      }
    }
  },
  "cats2": {
    "Name": "football",
    "imgUrl": "some url"
  }
}

这就是我的要求

这是我需要的数组结构,当我添加新列表时,它必须唯一地存储在 cricket 类别中。

[
  {
    "Name": "cricket",
    "imgUrl": "some url",
    "list1": [
      {
        "Name": "bat",
        "imgUrl": "some url",
        "price": "$100"
      },
      {
        "displayName": "pads",
        "imgUrl": "some url",
        "price": "$50"
      }
    ]
  },
  {
    "Name": "football",
    "imgUrl": "some url"
  }
]

我是 Angular 的新手,请帮我解决这个问题

最佳答案

使用 Object.keys 并将它们传递给 Array.prototype.map 以创建您想要的数组 - 请参见下面的演示:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(e=>object[e]);

console.log(result);
.as-console-wrapper{top:0;max-height:100%!important;}

编辑:

更正解决方案使 list1 成为一个数组:

var object={cats1:{Name:"cricket",imgUrl:"some url",list1:{bat:{Name:"bat",imgUrl:"some url",price:"$100"},pads:{displayName:"pads",imgUrl:"some url",price:"$50"}}},cats2:{Name:"football",imgUrl:"some url"}};

var result = Object.keys(object).map(function(e){
  Object.keys(object[e]).forEach(function(k){
     if(typeof object[e][k] == "object") {
       object[e][k] = Object.keys(object[e][k]).map(function(l){
         return object[e][k][l];
       });
     }
  });
  return object[e];
});

console.log(result);
.as-console-wrapper{top:0;max-height:100%!important;}

关于javascript - 将 json 对象转换为数组以使用 Javascript 遍历 ng-repeat?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40521167/

相关文章:

arrays - Angular 8 : Remove empty Object from array

javascript - 使用nodeJS模块而不使用nodeJs

javascript - 嵌套 react 路由器组件在页面重新加载时不会加载/渲染?

javascript - Await 在异步函数上工作正常,但在 promises 上却不行

javascript - 从 json 对象添加 ng-init 代码

javascript - 按键值过滤和分组

javascript - Javascript 中的 array.push 不起作用

javascript - 页面滚动和 JQuery

javascript - Ionic/Angular JS - 使用地理位置后输入字段未正确更新

javascript - 修改当前的正则表达式以允许特殊字符