undefined json array file с помощью javascript

Question

Мне нужно отобразить изображения в браузере, и я хочу получить изображение из ответа 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 
    } 

Он не отображает имя и изображение, но возвращает значение undefined. Другая проблема заключается в том, что первый li тег вставляется 5 div, то в первом div есть 5 span, первый пролет есть 5 img тега и первый тег img есть 5 div. Как решить все эти проблемы?

Answer 1

Ваш вопрос не имеет ничего общего с JSON. Вы загружаете скрипт JavaScript, который присваивает литерал объекта переменной champion. Это, очевидно, уже объект JavaScript, поэтому вам не нужно преобразовывать его с помощью JSON.parse (и, конечно же, не с JSON.stringify, что делает его ... строкой).

Некоторые другие вопросы:

• Вы получите недопустимое HTML при добавлении дочерних элементов к img элемента. Вместо этого вы можете добавить этот элемент рядом с элементом img, поэтому у них есть общий родительский элемент.

• Не используйте getElementsByClassName("champ-div")[0], чтобы найти элемент, который вы только что создали, потому что это будет работать только на первой итерации цикла. Во всех других итерациях вы найдете обратно тот, который был создан на первой итерации, а не тот, который вы создали в текущей итерации current. Держите его просто: у вас все еще есть переменная с этим элементом, поэтому используйте его.

• Вы изменяете переменную images на каждой итерации, делая путь недействительным во всех последующих итерациях. Не изменяйте эту переменную. Просто соедините имя файла с ним, но не сохраняйте результат в этой переменной.

• Не используйте innerHTML, если вы хотите назначить текст элементу. Это может привести к проблемам, когда в тексте есть & или < символов.Вместо этого используйте textContent

• Число циклов, в течение которых выполняется цикл, равно 5, что будет проблемой, если в champion будет меньше элементов. Сделайте его более динамичным и повторяйте столько раз, сколько есть предметов в champion. for ... of может пригодиться для этого.

• Меньше проблемы, но лучше отложить прикрепление элемента к документу, пока вы не закончите его создание.

Вот модификация кода, который принимает эти пункты во внимание:

// Don't transform champion into champ: it already is an object. 
// For this reason, you don't really need another variable - use champion 
var images = 'mylink/'; 
var counter; 
var name; 

// Keep it dynamic, and use the object for determining the number of iterations: 
for(obj of champion){ 
    var liTag = document.createElement("li"); 
    liTag.className = "champ-list"; 

    var divChamp = document.createElement("div"); 
    divChamp.className = "champ-div"; // you can use className property 
    liTag.appendChild(divChamp); 

    var spanBox = document.createElement("span"); 
    spanBox.className = "champ-box"; 
    divChamp.appendChild(spanBox); 

    var imgTag = document.createElement("img"); 
    imgTag.className = "champ-icon"; 
    imgTag.setAttribute("alt", "champ"); 
    imgTag.setAttribute("src", images + obj.img); // don't modify images! 
    // don't use getElementsByClassName()[0], as you'll get the first always: 
    divChamp.appendChild(imgTag); 

    var divName = document.createElement("div"); 
    divName.className = "champ-name"; 
    divName.textContent = obj.name; // don't use innerHTML for assigning text 
    // you cannot append children to an img tag! 
    spanBox.appendChild(divName); 

    // Delay the attachment in the document to when you have all the content ready: 
    document.getElementById("myul").appendChild(liTag);  
} 

Answer 2

Вы используете JSON.stringify вместо JSON.parse. В то время как первый преобразует объект JavaScript в строку JSON, последний преобразует строку JSON в объект JavaScript, доступ к которому можно получить как champ[counter].

Например,

var x = { "a" : 1 } 

является объектом JavaScript, и вы можете получить доступ к элементу «а» x.a, но

var y = JSON.stringify(x) 

дает строку '{ "a" : 1 }', которая не является ни объектом, ни массив, и вы не можете получить к нему доступ, как один.