将json对象转换为数组以使用Javascript迭代ng-repeat？

Question

这是我的示例json，我从firebase获取了json obj，我必须将列表转换为数组，以通过ng-repeat在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"
  }
}

这就是我需要的方式

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

[
  {
    "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"
  }
]

我是个新角色任何人请帮我解决这个问题

Answer 1

使用<div class="col-md-7"> <input type="date" id="exampleInput" ng-model="UIcontroller.JobDataModel.date" placeholder="yyyy-mm-dd" required/> <div class="col-md-7"> <input type="time" id="exampleInput1" ng-model="UIcontroller.JobDataModel.time" placeholder="hh:mm:ss:" required/> 并将其传递给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);

Answer 2

您可以递归但请注意这可能会导致大型对象冻结，并且还会导致pod update

逻辑

• 循环对象并检查所有条目是否为对象。
• 如果是，那么简单的Maximum Call Stack exceeded就可以了。
• 如果没有，那么你将不得不复制单个值和if对象，然后再次为其内部对象循环。一种简单的方法是循环每个键，如果type不是object，只返回值。

Object.keys(obj).map(x=>obj[x])

Answer 3

你可以通过迭代输入对象键并剥离键来做这样的事情。

＆＃13;

＆＃13;

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.result = {
      "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"
      }
    };
    $scope.format = Object.keys($scope.result).map((key) => $scope.result[key])
  }
]);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">

    <div>Formatted</div>
    <pre>{{format | json}}</pre>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;