嘗試從給定的URL解析JSON

Question

因此，我得到了一個URL：“ http://theossrv2.epfl.ch/aiida_assignment2/api/points/ ”，並且我一直在嘗試從該URL獲取JSON。 到目前為止，這是我所做的：

var getJSON = function (url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.responseType = 'json';
    xhr.onload = function () {
        var status = xhr.status;
        if (status === 200) {
            callback(null, xhr.response);
        } else {
            callback(status, xhr.response);
        }
    };
    xhr.send();
}

getJSON('http://theossrv2.epfl.ch/aiida_assignment2/api/points/',
    function (err, data) {
        if (err !== null) {
            alert('Something went wrong: ' + err);
        } else {
            alert('Your max_x: ' + data.max_x);
        }
    });

現在，我只是將max_x放在警報框中，以查看是否恢復了它（似乎是這種情況）。 但是，當我嘗試恢復“圓”（即x或y坐標，甚至是id）中的數據時，我得到“未定義”（在警報框中），我不明白為什么，也無法理解實際恢復存儲在“圓圈”中的數據。

問題是，我希望能夠解析從該URL獲得的JSON，因為我需要在畫布上繪制這些圓圈，而如果我無法恢復這些坐標，則無法這樣做。

我希望我已經足夠清楚了。 請注意，在一般情況下，我只是關於JS和HTML編碼的初學者，因此，如果您發現一些明顯的問題，那么對我而言可能並非如此。

Answer 1

您的數據變量包含具有以下鍵的對象：

{
    circles: [ ... ],
    range: {
        max_x: 300,
        ...
    }
}

因此，為了獲得max_x ，您需要讀取data.range.max_x屬性而不是data.max_x 。

至於circles中的數據，您將在data.circles具有對象數組，因此您可以使用for循環對其進行迭代，例如：

for (var i = 0; i < data.circles.length; i++) {
    // data.circles[i] contains object with { id, x, y } properties
}

Answer 2

從服務器返回的data實際上是具有關鍵circles和range的對象，而max_x是range關鍵的屬性。 你會得到像：

alert('Your max_x: ' + data.range.max_x)

Answer 3

因為發送對象

{
 "circles": [
  {
    "id": 0,
    "x": 52.47599289586478,
    "y": 249.77824107448706
  },
  {
    "id": 1,
    "x": 281.34253692626953,
    "y": 281.34253692626953
  },
  {
    "id": 2,
    "x": 99.59752655029297,
    "y": 99.36786252693544
  }
],
 "range": {
  "max_x": 300,
  "max_y": 300,
  "min_x": 0,
  "min_y": 0
 }
}

所以你需要data.range.max_x