试图让json的东西进入一个阵列，但我无法把它拿出来

Question

好吧，我想我可能会迟钝，但出于某种原因，我无法弄清楚这一点。

我有这段代码。

var x = [];

$.getJSON('data.json', function(data) { 
    $.each(data, function(key, val) {
        x.push(val);
    });
});

console.log(x);

将其打印到控制台。

我不能为我的生活弄清楚如何访问x或y。有人可以向我解释这是如何工作的吗？

JSON：

[
 {
   "x": 121.87375,
   "y": 483.7810417
 },
 {
   "x": 116.831875,
   "y": 471.9985417
 },
 {
   "x": 111.694375,
   "y": 460.0341667
 }
]

我只是希望能够进行for循环并每秒将x和y更新为下一个索引。

Answer 1

$.getJSON是异步的，当您拨打x电话后立即拨打console.log时，数据不在getJSON内。您必须等待网络请求完成才能使用它正在检索的数据。

有几种方法可以让它发挥作用。传统方法是在收到回调后使用回调，方法是移动console.log：

＆＃13;

＆＃13;

var jsonData = [{"x": 121.87375,"y": 483.7810417},{"x": 116.831875,"y": 471.9985417},{"x": 111.694375,"y": 460.0341667}];
$.getJSON = function fakeGetJSON (url, callback) {
  setTimeout(callback.bind(null, jsonData), 500);
};

var x = [];

$.getJSON('data.json', function(data) {
  $.each(data, function(key, val) {
      x.push(val);
  });
  console.log(x);
  // call another function that uses x, etc.
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

第二种方法是使用Promise。 jQuery AJAX调用返回jqXHR object。 As of version 3.0 jqXHR对象与Promises / A +标准兼容。如果您使用的是3.0之前的版本，则必须使用.done代替.then。

＆＃13;

＆＃13;

var jsonData = [{"x": 121.87375,"y": 483.7810417},{"x": 116.831875,"y": 471.9985417},{"x": 111.694375,"y": 460.0341667}];
$.getJSON = function fakeGetJSON (url, callback) {
  return new Promise(function(resolve, reject) {
    setTimeout(function () {resolve(jsonData)}, 500);
  });
};

var x = [];

$.getJSON('data.json').then(function(data) {
  $.each(data, function(key, val) {
      x.push(val);
  });
  console.log(x);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

您也可以这样写：

＆＃13;

＆＃13;

var jsonData = [{"x": 121.87375,"y": 483.7810417},{"x": 116.831875,"y": 471.9985417},{"x": 111.694375,"y": 460.0341667}];
$.getJSON = function fakeGetJSON (url, callback) {
  return new Promise(function(resolve, reject) {
    setTimeout(function () {resolve(jsonData)}, 500);
  });
};

var x = [];

var dataPromise = $.getJSON('data.json').then(function(data) {
  $.each(data, function(key, val) {
      x.push(val);
  });
  return x;
});

dataPromise.then(function (data) {
  console.log(data);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

还应该注意的是，除非您在实际代码中进行更复杂的处理，否则不需要使用$.each循环数据，正在返回的数据已经是数组对象：

＆＃13;

＆＃13;

var jsonData = [{"x": 121.87375,"y": 483.7810417},{"x": 116.831875,"y": 471.9985417},{"x": 111.694375,"y": 460.0341667}];
$.getJSON = function fakeGetJSON (url, callback) {
  setTimeout(callback.bind(null, jsonData), 500);
};

var x = [];

$.getJSON('data.json', function(data) {
  x = data;
  console.log(x);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

一些澄清：

您进入JSON的
1. console已经有array of objects。你还需要什么？
2. 如果您想从x访问y和JSON的值，那么您可以使用JavaScript map()或for..in loop方法迭代数组对象。

使用map（）

var jsonObj = [
 {
   "x": 121.87375,
   "y": 483.7810417
 },
 {
   "x": 116.831875,
   "y": 471.9985417
 },
 {
   "x": 111.694375,
   "y": 460.0341667
 }
];

var res = jsonObj.map(function(item) {
  return item.x;
});

console.log(res);

使用for ... in循环

var jsonObj = [
 {
   "x": 121.87375,
   "y": 483.7810417
 },
 {
   "x": 116.831875,
   "y": 471.9985417
 },
 {
   "x": 111.694375,
   "y": 460.0341667
 }
];

for(var i in jsonObj) {
  console.log(jsonObj[i].x);
}