javascript - 尝试从给定的 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，因为我需要在 Canvas 上绘制这些圆圈，如果无法恢复这些坐标，我就无法做到这一点。

我希望我已经说得足够清楚了。请注意，对于一般的 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
}