【问题标题】:Iterate over a json Object in javascript having an array inside array迭代javascript中的json对象,数组中有一个数组
【发布时间】:2018-08-18 03:15:21
【问题描述】:

我是网络开发的新手。我确实有一个 json obj,就像

$scope.jsonData =     {
        "messages": {
            "A": [{
                "missingFields": [{
                    "RESPONSIBILITY": ""
                }],
                "temporaryId": 2,
                "messages": "",
                "id": 2,
                "content": ""
            }, {
                "missingFields": [{
                    "RESPONSIBILITY": ""
                }],
                "temporaryId": 3,
                "messages": "",
                "id": 3,
                "content": ""
            }, {
                "missingFields": [{
                    "RESPONSIBILITY": ""
                }],
                "temporaryId": 4,
                "messages": "",
                "id": 4,
                "content": ""
            }],
            "B": [{
                "missingFields": [{
                    "CITY": ""
                }, {
                    "PINCODE": ""
                }],
                "messages": "No Address details found.",
                "id": -1,
                "content": ""
            }]
        }
     }

现在我想遍历这个对象,我想得到"RESPONSIBILITY" 字段。我在这里尝试过-

for (var i=0; i < $scope.jsonData.messages.length; i++) {
}

但它给出的消息长度为undefined。所以,我也想在 angular code 中使用它。我用过 -

ng-repeat="suggestion in jsonData.messages

谁能给我解释一下。我搜索了很多并尝试过,所以我问了这个问题。

【问题讨论】:

标签: javascript jquery angularjs html


【解决方案1】:

您需要有嵌套循环并使用Object.keys 来获取密钥

喜欢:

for ( var k in jsonData.messages ) {
   jsonData.messages[k].forEach((v)=>{

       let tID = v.temporaryId || ""; //Get the temporaryId
       console.log( tID );

       v.missingFields.forEach((o)=>{
           //Object.keys(o)[0] <-- To get the first key of the object
           console.log( Object.keys(o)[0] );
       });
   });
}

要制作一个简化的数组,您可以使用Object.valuesmap 的值。

let jsonData = {
  "messages": {
    "A": [{
      "missingFields": [{
        "RESPONSIBILITY": ""
      }],
      "temporaryId": 2,
      "messages": "",
      "id": 2,
      "content": "CONTENT 1"
    }, {
      "missingFields": [{
        "RESPONSIBILITY": ""
      }],
      "temporaryId": 3,
      "messages": "",
      "id": 3,
      "content": ""
    }, {
      "missingFields": [{
        "RESPONSIBILITY": ""
      }],
      "temporaryId": 4,
      "messages": "",
      "id": 4,
      "content": ""
    }],
    "B": [{
      "missingFields": [{
        "CITY": ""
      }, {
        "PINCODE": ""
      }],
      "messages": "No Address details found.",
      "id": -1,
      "content": ""
    }]
  }
}

let simplified = Object.values(jsonData.messages).map((v) => {
  let t = [];
  v.forEach(o => {
    t.push({
      temporaryId: o.temporaryId || "",
      missingFields: o.missingFields.map((x) => Object.keys(x)[0]),
      content: o.content || ""
    });
  });
  return t;
}).reduce((c, v) => c.concat(v), []);

console.log(simplified);

仅使用 for 循环。

var simplified = [];
for ( var k in jsonData.messages ) {
    for ( var i in jsonData.messages[k] ) {
        var temporaryId = jsonData.messages[k][i].temporaryId;
        var content = jsonData.messages[k][i].content;
        var missingFields = [];

        for ( var x in jsonData.messages[k][i].missingFields ) {
            for ( var y in jsonData.messages[k][i].missingFields[x] ) missingFields.push( y );
        }

        simplified.push({
          temporaryId: temporaryId,
          missingFields: missingFields,
          content: content
        });
    }
}

【讨论】:

  • 一件事,在这里我如何使用它来获取 ng-repeat="suggestion in jsonData.messages 中的 html 模板中的临时 ID。
  • 我添加了访问temporaryId @ganesh的代码
  • 好的,非常感谢。我可以再问你一个问题吗?
  • 乐于助人。当然。
  • 在这里,现在我想根据这些数据创建一个对象,它将按照您的方式读取并创建一个对象。喜欢 -
【解决方案2】:
const flatten = [].concat.apply([], Object.values(jsonData.messages))
const result = [].concat.apply([], flatten.map(item => item.missingFields))

【讨论】:

  • 虽然此代码可以回答问题,但提供有关 如何为什么 解决问题的附加上下文将提高​​答案的长期价值。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-08-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-03-29
相关资源
最近更新 更多