在 JavaScript 中循环遍历 JSON 对象答案

【问题标题】：Loop through JSON objects in JavaScript在 JavaScript 中循环遍历 JSON 对象
【发布时间】：2016-11-18 16:48:56
【问题描述】：

我的 JavaScript 代码中有这样的 JSON 结构

[{"id":10,"latitude":"49","longitude":"2","altitude":"construction","name":"sjiajnjdksaa","description":"jfis","urlidle":"asd","urlselected":"asd"},
    {"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

    {"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

    {"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

    {"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

    {"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

    {"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"}]

这是从$.getJSON(serverUrl, function(data) 方法获得的，如下所示。

var serverUrl = https://demo.blah.fgh/return.php?lat=20;
var jqxhr = $.getJSON(serverUrl, function(data) {
console.log(jqxhr.responseText);

但是，我需要遍历它们中的每一个，并将每一行放入一个对象中，如下所示

//Loop Starts

var singlePoi = {
                "id": poiData[i].id,
                "latitude": parseFloat(poiData[i].latitude),
                "longitude": parseFloat(poiData[i].longitude),
                "altitude": parseFloat(poiData[i].altitude),
                "title": poiData[i].name,
                "description": poiData[i].description,
                "urlidle": poiData[i].urlidle,
                "urlselected": poiData[i].urlselected

            };
// Now do operations with singlePoi
//Loop ends

【问题讨论】：

你想把每个数组对象放到单独的Object中吗？你可以，但想想你需要照顾的对象的数量。还有你将如何命名这些对象？

标签： javascript php arrays json getjson

【解决方案1】：

如果您希望遍历返回并格式化对象，您可以执行以下操作：

function formatReturn(data) {
  var formattedData = [];
  data.forEach( function(poiData) {
    formattedData.push(
      {
        "id": poiData.id,
        "latitude": parseFloat(poiData.latitude),
        "longitude": parseFloat(poiData.longitude),
        "altitude": parseFloat(poiData.altitude),
        "title": poiData.name,
        "description": poiData.description,
        "urlidle": poiData.urlidle,
        "urlselected": poiData.urlselected
      }
    );
  });
  console.log(formattedData);
}

请注意，在这种情况下，您仍然会有一个对象数组，但纬度、经度和高度属性将应用 parseFloat。

如果您希望将所有行作为属性存储在对象中，您可以执行以下操作：

function formatReturn(data) {
  var formattedData = {};
  data.forEach( function(poiData,index) {
    formattedData["singlePoi_"+index] =
      {
      "id": poiData.id,
      "latitude": parseFloat(poiData.latitude),
      "longitude": parseFloat(poiData.longitude),
      "altitude": parseFloat(poiData.altitude),
      "title": poiData.name,
      "description": poiData.description,
      "urlidle": poiData.urlidle,
      "urlselected": poiData.urlselected
    };
  }
  console.log(formattedData);
}

以上将JSON返回中的每个项目存储为formattedData对象的新属性。

【讨论】：

【解决方案2】：

你可以试试这个经典的 javascript forEach

让你的 Json 结构是

var data=[{"id":10,"latitude":"49","longitude":"2","altitude":"construction","name":"sjiajnjdksaa","description":"jfis","urlidle":"asd","urlselected":"asd"},
{"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

{"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

{"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

{"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

{"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"},

{"id":10,"latitude":"22","longitude":"10","altitude":"asd","name":"zxcvbnmmmkk","description":"kk","urlidle":"qwerty","urlselected":"qwerty"}];

//Loop Starts
    data.forEach(function(poiData){
var singlePoi = {
                "id": poiData.id,
                "latitude": parseFloat(poiData.latitude),
                "longitude": parseFloat(poiData.longitude),
                "altitude": parseFloat(poiData.altitude),
                "title": poiData.name,
                "description": poiData.description,
                "urlidle": poiData.urlidle,
                "urlselected": poiData.urlselected

            };
// Now do operations with singlePoi
});
//Loop ends

【讨论】：

【解决方案3】：

使用 jQuery，

$.each(pioData, function(i, v) {
        v.latitude = parseFloat(v.latitude);
        ...
        ...
        ...

});

因为本质上，您对对象数组所做的是更改每个属性的值类型。完成迭代后，您可以再次使用pioData，根据您的需要进行修改。

【讨论】：