使用javascript的json数组文件未定义

我必须向浏览器显示图像，我想从JSON响应中获取图像，并使用Javascript将其显示到浏览器。这就是JSON响应的样子：

var champion = [
{
    "name":"Aatrox",
     "img" : "Aatrox.png" 
},
{   "name":"Ahri", 
     "img" : "Ahri"
},
{
    "name":"Akali", 
      "img" : "Akali.png"
},
{   "name":"Alistar", 
    "img" : "Alistar.png"
},
{   "name":"Amumu",
    "img" : "Amumu.png"
}
]

JSON是一个外部文件，名为data.JSON。 我是初学者。我写了这段代码：

    var champ = JSON.stringify(champion);
    //var mydata = JSON.parse(champion);
    var images = 'mylink/'; 
    var counter;
    var name;

    for(counter=0; counter<5 ; counter++ ){

        var liTag = document.createElement("li"); //create li tag
        liTag.setAttribute("class","champ-list");
        document.getElementById("myul").appendChild(liTag); //attach the new tag li on ul tag

        var divChamp = document.createElement("div"); //create "champ" div
        divChamp.setAttribute("class" , "champ-div");
        document.getElementsByClassName("champ-list")[0].appendChild(divChamp);   //attack the new tag div on li tag

        var spanBox = document.createElement("span"); //new span tag
        spanBox.setAttribute("class","champ-box");
        document.getElementsByClassName("champ-div")[0].appendChild(spanBox); //attack the new tag span on div tag

        var imgTag = document.createElement("img"); //new img tag
        images +=champ[counter].img;
        imgTag.setAttribute("class", "champ-icon");
        imgTag.setAttribute("alt", "champ");
        imgTag.setAttribute("src", images );
        document.getElementsByClassName("champ-box")[0].appendChild(imgTag);         //attach the new tag img on span tag

        name = champ[counter].name;                                                
        var divName = document.createElement("div"); //new div tag
        divName.setAttribute("class","champ-name");
        divName.innertHTML=name;
        document.getElementsByClassName("champ-icon")[0].appendChild(divName);  //attack the new tag div on img tag 
    }

var champ=JSON.stringify（champion）；
//var mydata=JSON.parse（champion）；
var images='mylink/'；
var计数器；
变量名；
对于（counter=0；counter您使用的是JSON.stringify而不是JSON.parse。前者将JavaScript对象转换为JSON字符串，后者将JSON字符串转换为JavaScript对象，然后您可以作为
champ[counter]
访问该对象

比如说,

var x = { "a" : 1 }

是JavaScript对象，您可以通过
x.a
访问元素“a”，但是

var y = JSON.stringify(x)

为您提供一个字符串
'{“a”：1}'
，它既不是对象也不是数组，您不能像一个数组那样访问它。
您使用的是JSON.stringify而不是JSON.parse。前者将JavaScript对象转换为JSON字符串，后者将JSON字符串转换为JavaScript对象，然后您可以作为
champ访问它[计数器]

比如说,

var x = { "a" : 1 }

是JavaScript对象，您可以通过
x.a
访问元素“a”，但是

var y = JSON.stringify(x)

给您一个字符串<代码>'{“a”：1}“

，它既不是对象也不是数组，您无法像访问数组一样访问它。

您的问题与JSON无关。您正在加载一个JavaScript脚本，为变量

champion

分配一个对象文本。这显然已经是一个JavaScript对象，因此您不需要使用

JSON.parse对其进行转换e> （当然不是使用
JSON.stringify
，这使它成为一个字符串）

其他一些问题：


将子元素添加到
img
元素时，您将获得无效的HTML。您可以将该元素添加到
img
元素旁边，这样它们就有了一个公共的父元素

不要使用
getElementsByClassName（“champ div”）[0]
查找您刚刚创建的元素，因为这只在循环的第一次迭代中有效。在所有其他迭代中，您将找到在第一次迭代中创建的元素，而不是在当前迭代中创建的元素。请保持简单：您仍然有一个与该元素相关的变量，因此请使用它

在每次迭代中修改
images
变量，使路径在所有后续迭代中无效。不要更改此变量。只需将文件名连接到该变量，但不要将结果存储回该变量

当您要为元素分配文本时，不要使用
innerHTML
。当文本恰好有
&
或
时，可能会导致问题。您的问题与JSON无关。您正在加载一个JavaScript脚本，该脚本将对象文本分配给变量
champion
。这显然已经是一个JavaScript对象，因此您不需要使用
JSON.parse
（当然也不需要使用
JSON.stringify
，这使它成为一个字符串）

其他一些问题：


将子元素添加到
img
元素时，您将获得无效的HTML。您可以将该元素添加到
img
元素旁边，这样它们就有了一个公共的父元素

不要使用
getElementsByClassName（“champ div”）[0]
查找您刚刚创建的元素，因为这只在循环的第一次迭代中有效。在所有其他迭代中，您将找到在第一次迭代中创建的元素，而不是在当前迭代中创建的元素。请保持简单：您仍然有一个与该元素相关的变量，因此请使用它

在每次迭代中修改
images
变量，使路径在所有后续迭代中无效。不要更改此变量。只需将文件名连接到该变量，但不要将结果存储回该变量

当您要将文本分配给元素时，不要使用
innerHTML
。如果文本恰好有
&
或
谢谢@Carl，则可能会导致问题。我不知道如何将代码格式化为那样（没有正确阅读说明：）很抱歉，学究式的说法是，JSON对象这个词是错误的。它应该是JavaScript对象。JSON仅仅是一种表示语言无关对象的字符串格式。谢谢@Carl，我不知道如何将代码格式化成那样（没有正确阅读说明：）)很抱歉说得太迂腐了，但是术语JSON对象是错误的。它应该是JavaScript对象。JSON只是一种表示语言无关对象的字符串格式。请显示（Ajax？）用于从您的文件中检索JSON的代码。我不使用ajax。我写过这样的代码：在这种情况下，不涉及JSON，您将JSON与加载一个JavaScript脚本混淆，该脚本分配一个带有对象文本的变量。这与JSON无关。如果是JSON，我将f您的文件在开始时没有
var champion=
。但是您应该通过Ajax请求加载它，这样您就可以将它分配给您选择的变量。另外，请阅读您为问题添加标签的标记
json
的用法说明。很抱歉，我的知识太少。感谢您的解释，请显示（阿贾克斯？）用于从您的文件中检索JSON的代码。我不使用ajax。我写过这样的代码：在这种情况下，不涉及JSON，您将JSON与加载一个JavaScript脚本混淆，该脚本分配一个带有对象文本的变量。这与JSON无关。如果是JSON，我将f您的文件在开始时没有
var champion=
，但是您应该通过Ajax请求加载它，这样您就可以将它分配给变量