如何使用jQuery从JSON文件读取详细信息？

Question

我正在尝试制作自己的基于图块的游戏； 一个非常简单的。 我决定将必要的关卡数据放入JSON文件中，以便通过我在游戏引擎中的原始尝试进行读取。

{
    "tileset":"main.png",
    "layers":[
        [
            [8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [3 ,3 ,3 ,3 ,2 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [1 ,1 ,1 ,1 ,5 ,0 ,0 ,0 ,0 ,0 ,0 ]
        ], [
            [1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [1 ,1 ,1 ,1 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [1 ,1 ,1 ,1 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ]
        ]
    ]
}

但是，我是JavaScript之类的完全新手，甚至jQuery也有点牵强。 我将如何读取此文件，然后将图层的每个锯齿状数组放入各自的变量中？

例如，取第一层数组并将其放入var first_layer等中，依此类推，以此类推

Answer 1

看到这个小提琴。

您可以使用$.get() 函数作为jQuery ajax函数的包装器。 您如何处理数据取决于您，我只是出于说明目的将其打孔。

$.get("/echo/json/", function(data) {
  var data = json; // only for fiddle
  data.layers.forEach(function(layer, index) {
    $("body").append("<ul class=\"list-unstyled layer\" data-index=\"" + index + "\"></ul>");
    layer.forEach(function(row) {
      $(".layer[data-index=" + index + "]").append("<li>" + JSON.stringify(row) + "</li>");
    });
  });
}, "json");

您需要对JSON数据进行一些细微调整（这些图层需要封装在数组中，否则它是无效的JSON- 在线检查 ）。

您可以在框上更改/echo/json/作为JSON文件的URL。 这样就不需要数据分配了（我需要它，因为我不能在小提琴中使用AJAX）。

如果您需要我扩展使用的任何技术，请询问。