web-dev-qa-db-ja.com

JavaScriptオブジェクトを配列に変換して、JavaScriptを使用してng-repeatを反復しますか？

これが私のサンプル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"
  }
]

私はangular=に新しいです。この問題を理解するのを手伝ってください

javascriptangularjsarraysjson
9
Sukumar MS

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;}
16
kukkuz

再帰は可能ですが、これにより大きなオブジェクトがフリーズし、_Maximum Call Stack exceeded_につながる可能性があることに注意してください

論理

  • オブジェクトをループして、すべてのエントリがオブジェクトであるかどうかを確認します。
  • はいの場合、単純なObject.keys(obj).map(x=>obj[x])で十分です。
  • そうでない場合は、個々の値をコピーし、オブジェクトの場合は、内部オブジェクトに対して再度ループする必要があります。単純な方法は、すべてのキーでループし、タイプがオブジェクトでない場合は、値を返すだけです。
_function ObjectToArray(obj) {
  if (typeof(obj) === 'object') {
    var keys = Object.keys(obj);
    var allObjects = keys.every(x => typeof(obj[x]) === 'object');
    if (allObjects) {
      return keys.map(x => ObjectToArray(obj[x]));
    } else {
      var o = {};
      keys.forEach(x => {
        o[x] = ObjectToArray(obj[x])
      });
      return o;
    }
  } else {
    return obj;
  }
}

var d={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"}};

console.log(ObjectToArray(d))_
3
Rajesh

入力オブジェクトのキーを繰り返し処理してキーを取り除くことにより、このようなことを行うことができます。

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])
  }
]);
<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>
1
Sreekanth