我如何使用 Json 数据作为数组

Question

这是我第一次使用 javvscript，我正在基于我想要的一些 jason 数据开发一个计算器，当我输入经度和纬度时，我得到了与该经度和纬度相关联的网格代码这可能 json 数据看起来像

   myData = 
    {
   "datagrid": [{"GRIDCODE":1735,"lat":35.91511132,"long":-5.401484264},
              {"GRIDCODE":1805,"lat":35.90677815,"long":-5.468149593},
              {"GRIDCODE":1808,"lat":35.90677815,"long":-5.459816427}
             ]
    }

这是我的尝试：

<!DOCTYPE html>
<html>
<body>

<p>Looping through arrays inside arrays.</p>
<p id="demo"></p>

<script>
var lat = 35.90677815;
var long = -5.468149593
var myObj, i, j, x,y,z = "";
myData = {"datagrid": [{"GRIDCODE":1735,"lat":35.91511132,"long":-5.401484264},{"GRIDCODE":1805,"lat":35.90677815,"long":-5.468149593},{"GRIDCODE":1808,"lat":35.90677815,"long":-5.459816427},{"GRIDCODE":1804,"lat":35.90677815,"long":-5.451483261},{"GRIDCODE":1657,"lat":35.90677815,"long":-5.40981743},{"GRIDCODE":1718,"lat":35.90677815,"long":-5.401484264},{"GRIDCODE":1738,"lat":35.90677815,"long":-5.384817932},{"GRIDCODE":1784,"lat":35.89844499,"long":-5.476482759}
  ]
}
for (i in myData.datagrid) {
if (lat = myData.datagrid[i].lat && long = myData.datagrid[i].long )
{
x += "<h2>" + myData.datagrid[i].GRIDCODE + "</h2>";
y +=  lat ;
z +=  long ;
}
 
}
document.getElementById("demo").innerHTML = x,y,z;
</script>

</body>
</html>

Answer 1

您在 if 语句中混淆了变量分配和测试。您的 if 语句应包含相等性测试“==”，然后您需要将这些值分别分配给变量。

<!DOCTYPE html>
<html>

<body>

  <p>Looping through arrays inside arrays.</p>
  <p id="demo"></p>

  <script>
    var lat = 35.90677815;
    var long = -5.468149593
    var myObj, i, j, x, y, z = "";
    myData = {
      "datagrid": [{
        "GRIDCODE": 1735,
        "lat": 35.91511132,
        "long": -5.401484264
      }, {
        "GRIDCODE": 1805,
        "lat": 35.90677815,
        "long": -5.468149593
      }, {
        "GRIDCODE": 1808,
        "lat": 35.90677815,
        "long": -5.459816427
      }, {
        "GRIDCODE": 1804,
        "lat": 35.90677815,
        "long": -5.451483261
      }, {
        "GRIDCODE": 1657,
        "lat": 35.90677815,
        "long": -5.40981743
      }, {
        "GRIDCODE": 1718,
        "lat": 35.90677815,
        "long": -5.401484264
      }, {
        "GRIDCODE": 1738,
        "lat": 35.90677815,
        "long": -5.384817932
      }, {
        "GRIDCODE": 1784,
        "lat": 35.89844499,
        "long": -5.476482759
      }]
    }
    for (i in myData.datagrid) {
      if (lat == myData.datagrid[i].lat && long == myData.datagrid[i].long) {
        x += "<h2>" + myData.datagrid[i].GRIDCODE + "</h2>";
        y += myData.datagrid[i].lat;
        z += myData.datagrid[i].long;

      }

    }
    document.getElementById("demo").innerHTML = x, y, z;
  </script>

</body>

</html>

Answer 2

这是一种在对象数组中查找特定值的简洁方法。（我会在下面添加一个更好的。）

// Defines initial values
const
  desiredLat = 35.90677815,
  desiredLong = -5.468149593,
  myData = {
    "datagrid": [
      { "GRIDCODE": 1735,"lat": 35.91511132, "long": -5.401484264 },   
      { "GRIDCODE": 1805, "lat": 35.90677815, "long": -5.468149593 },
      { "GRIDCODE": 1808, "lat": 35.90677815, "long":-5.459816427 },
      { "GRIDCODE": 1784, "lat": 35.89844499, "long":-5.476482759 }
    ]
  };

// Calls a lookup function and binds the returned value to `gridcode`
// Then builds a string from the result and logs it to the browser console
const
  gridcode = lookupGridcodeByLatAndLong(myData.datagrid),
  headerHTML = "<h2>" + gridcode + "</h2>";
console.log(headerHTML);


// Defines the lookup function
function lookupGridcodeByLatAndLong(sourceArray){
  let gridcode = 0;
  // Loops through the source array and updates the value of `gridcode`
  //   when matching `.lat` and `.long` properties are found
  for (let currentObject of sourceArray){
    if (currentObject.lat === desiredLat && currentObject.long === desiredLong){
      gridcode = currentObject.GRIDCODE;
    }
  }
  // Returns (to the code that called the function) the result of the most recent match
  // (If no object has both `desiredLat` and `desiredLong`, gridcode is still zero)
  return gridcode;
}

或者：
几年前，Array.find 方法内置于 JavaScript 中。它这样做：
- 采用 returns true 或 false 的函数。（我们根据具体情况编写此功能以满足我们的需要。）
- 将我们的函数应用于数组中的每个项目，直到我们的函数 returns 对于其中一项为真。
- 为我们提供函数返回 true 的项目。

在本例中，我使用了箭头函数，但您可以改用传统函数。

参见 MDNArray.prototype.find and Arrow functions

// Defines initial values
const
  desiredLat = 35.90677815,
  desiredLong = -5.468149593,
  myData = {
    "datagrid": [
      { "GRIDCODE": 1735, "lat": 35.91511132, "long": -5.401484264 },
      { "GRIDCODE": 1805, "lat": 35.90677815, "long": -5.468149593 },
      { "GRIDCODE": 1808, "lat": 35.90677815, "long": -5.459816427 },
      { "GRIDCODE": 1784, "lat": 35.89844499, "long": -5.476482759 }
    ]
  },
  datagrid = myData.datagrid;


// Uses Array.find to get the value more succinctly
// (This method stops searching when it finds the first match)
const
  foundObject = datagrid.find(currentObject =>
    desiredLat === currentObject.lat 
    && desiredLong === currentObject.long 
  ),
  gridcode = foundObject.GRIDCODE,
  headerHTML = "<h2>" + gridcode + "</h2>";
console.log(headerHTML);

我如何使用 Json 数据作为数组

how i can use Json data as an array

javascript

arrays

json

calculator