gpt4 book ai didi

javascript - 使用 AJAX 检索嵌套 JSON 数组并输出到 HTML 列表

转载 作者:行者123 更新时间:2023-11-28 17:10:00 26 4
gpt4 key购买 nike

这个想法是采用一个 JSON 数组,循环遍历 planet 的每个条目,并将它们输出到无序列表,每个 li 一个条目。在本例中一切正常。

当 JavaScript 文件包含 JSON 数组及其下面的代码时,我已成功编写了一种输出嵌套 JSON 的方法,但在识别从外部 .json< 检索相同数据的方法时遇到了严重困难 文件,使用 AJAX。

这是有效的本地版本。

<ul id="object-list"></ul>
$(document).ready( function() {
var sol_sys = [];
sol_sys = {
"stars": [
{ "name": "Sun", "object": "Star", "url": "stars/sun" }
],
"planets": [
{ "name": "Mercury", "object": "Planet", "parent": "Sun", "url": "planets/mercury" },
{ "name": "Venus", "object": "Planet", "parent": "Sun", "url": "planets/venus" },
{ "name": "Earth", "object": "Planet", "parent": "Sun", "url": "planets/earth" },
{ "name": "Mars", "object": "Planet", "parent": "Sun", "url": "planets/mars" },
{ "name": "Ceres", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/ceres" },
{ "name": "Jupiter", "object": "Planet", "parent": "Sun", "url": "planets/jupiter" },
{ "name": "Saturn", "object": "Planet", "parent": "Sun", "url": "planets/saturn" },
{ "name": "Uranus", "object": "Planet", "parent": "Sun", "url": "planets/uranus" },
{ "name": "Neptune", "object": "Planet", "parent": "Sun", "url": "planets/neptune" },
{ "name": "Pluto", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/pluto" },
{ "name": "Eris", "object": "Dwarf Planet", "parent": "Sun", "url": "planets/eris" }
],
"moons": [
{ "name": "Luna", "object": "Moon", "parent": "Earth", "url": "moons/luna" },
{ "name": "Callisto", "object": "Moon", "parent": "Jupiter", "url": "moons/callisto" },
{ "name": "Ganymede", "object": "Moon", "parent": "Jupiter", "url": "moons/ganymede" },
{ "name": "Io", "object": "Moon", "parent": "Jupiter", "url": "moons/io" },
{ "name": "Europa", "object": "Moon", "parent": "Jupiter", "url": "moons/europa" },
{ "name": "Enceladus", "object": "Moon", "parent": "Saturn", "url": "moons/enceladus" },
{ "name": "Titan", "object": "Moon", "parent": "Saturn", "url": "moons/titan" },
{ "name": "Miranda", "object": "Moon", "parent": "Uranus", "url": "moons/miranda" },
{ "name": "Triton", "object": "Moon", "parent": "Neptune", "url": "moons/triton" },
{ "name": "Charon", "object": "Moon", "parent": "Pluto", "url": "moons/charon" }
]
}

var x = [];
$.each(sol_sys.planets, function(index) {
x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
});
$('#object-list').append(x);
});

但是,过去两天我一直在尝试找出实现此目的的方法,将 JSON 单独保存在单独的 .json 文件中。

这是我尝试过的一种方法的示例:

$(document).ready( function() {
var sol_sys = $.getJSON('assets/data.json');
var x = [];

$.each(sol_sys.planets, function(index) {
x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
});
$('#object-list').append(x);
});

此代码成功获取了控制台中可以看到的数据,但它也吐出了以下错误消息:未捕获类型错误:无法读取未定义的属性“长度”

我认为有一些明显的事情我完全错过了。我也尝试过演示的方法 here ,结果完全相同。

有人能指出我正确的方向吗?

谢谢!

最佳答案

$.getJSON 是一个异步调用 - 因此您需要使用回调函数来访问返回的数据:

$.getJSON('assets/data.json', function(sol_sys) {
var x = [];

$.each(sol_sys.planets, function(index) {
x += '<li><a href="' + sol_sys.planets[index].url + '" title="' + sol_sys.planets[index].name + '" target="_blank">' + sol_sys.planets[index].name + '</a></li>';
});
$('#object-list').append(x);
});

关于javascript - 使用 AJAX 检索嵌套 JSON 数组并输出到 HTML 列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54715792/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com