如何将json文件实现为javascript答案

【问题标题】：how to implement json file into javascript如何将json文件实现为javascript
【发布时间】：2020-09-07 14:31:29
【问题描述】：

我正在尝试将本地海量数据 json 文件实现到我的 javascript 文件中，我尝试了这个但不起作用，一直返回 0

这个函数的概念是当我输入 lat 和 long 时它应该返回与之关联的网格代码

    function lookupGridcodeByLatAndLong(lat, long)
{
  let gridcode = 0;
$.getJSON('example.json',function( data ) {

  var result = data.find(x => x.lat == lat && x.long == long)
  if (result) { gridcode = result.GRIDCODE;}
});
return gridcode;
};

这就是我的数据的样子

 [{"GRIDCODE":1765,"lat":35.916,"long":-5.401},{"GRIDCODE":1807,"lat":35.907,"long":-5.467},{"GRIDCODE":1798,"lat":35.907,"long":-5.459},{"GRIDCODE":1546,"lat":35.907,"long":-5.409},{"GRIDCODE":1667,"lat":35.907,"long":-5.401},{"GRIDCODE":1729,"lat":35.907,"long":-5.384},{"GRIDCODE":1756,"lat":35.899,"long":-5.484},{"GRIDCODE":1773,"lat":35.899,"long":-5.476},{"GRIDCODE":1828,"lat":35.899,"long":-5.467},{"GRIDCODE":1842,"lat":35.899,"long":-5.459},{"GRIDCODE":1779,"lat":35.899,"long":-5.451},{"GRIDCODE":1728,"lat":35.899,"long":-5.442},{"GRIDCODE":1773,"lat":35.899,"long":-5.434},{"GRIDCODE":1609,"lat":35.899,"long":-5.426}]

【问题讨论】：

标签： javascript arrays json

【解决方案1】：

这是因为 getJSON 调用是异步的。你应该做基于 Promise 的实现。

【讨论】：

【解决方案2】：

这是因为$.getJSON 正在运行异步。

您需要使用回调或Promises。

function lookupGridcodeByLatAndLong(lat, long, done) {
  $.getJSON('example.json', function(data) {
    var result = data.find(x => x.lat == lat && x.long == long)

    done(result ? result.GRIDCODE : 0)
  })
}

lookupGridcodeByLatAndLong(lat, long, function(gridcode) {
  // do something with gridcode
})

使用承诺（首选方式）

function lookupGridcodeByLatAndLong(lat, long) {
  return new Promise((resolve, reject) => {
    $.getJSON('example.json', function(data) {
      var result = data.find(x => x.lat == lat && x.long == long)

      if (result) {
        resolve(result.GRIDCODE)
      } else {
        reject()
      }
  })
}

lookupGridcodeByLatAndLong(lat, long)
.then(gridcode => {
  // do something with gridcode
})

【讨论】：

@MukeshKeshu 太棒了！ :)
function lookupGridcodeByLatAndLong(lat, long) { return new Promise((resolve, reject) => { $.getJSON('example.json', function(data) { var result = data.find(x => x.lat == lat && x.long == long) if (result) { resolve(result.GRIDCODE) } else { reject() } }) } }; $("#Btn" ).click(function() { var lat = document.getElementById("lat").value, long = document.getElementById("long").value; var result = lookupGridcodeByLatAndLong(lat, long); $("#result").html(result); });
没有。您不能只将返回值分配给#result，您需要使用.then 并在那里对#result 进行分配。
@MukeshKeshu 任何想法请
$("#Btn" ).click(function() { var lat = document.getElementById("lat").value; long = document.getElementById("long").value;lookupGridcodeByLatAndLong (lat, long).then(result =>{ $("#result").html(result) });