html - undefined by json array file using javascript -

i have display images browser , want image json response , display browser using javascript. json response looks like:

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" } ] 

the json external file, called data.json. beginner. wrote code:

    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 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 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 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 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 new tag div on img tag      } 

it not display name , image, returns value of undefined. problem first li tag inserted 5 div, in first div there 5 span, first span there 5 img tag , first img tag there 5 div. how solve these problems?

your question has nothing json. loading javascript script assigns object literal variable champion. javascript object, don't need transform json.parse (and not json.stringify makes ... string).

some other issues:

• you'll invalid html when adding child elements img element. can instead add element next img element, have common parent.

• don't use getelementsbyclassname("champ-div")[0] find element created, because work in first iteration of loop. in other iterations you'll find 1 created in first iteration, not 1 created in current iteration. keep simple: still have variable element, use it.

• you modify images variable in each iteration, making path invalid in subsequent iterations. don't change variable. concatenate file name it, don't store result in variable.

• don't use innerhtml when want assign text element. may lead problems when text happens have & or < characters. instead use textcontent

• the number of times loop has iterate fixed 5, problem when have fewer elements in champion. make more dynamic, , iterate many times there items in champion. for ... of can handy this.

• less issue, better delay attachment of element document, until finished building content.

here modification of code takes these points account:

// don't transform champion champ: object. // reason, don't need variable - use champion var images = 'mylink/';  var counter; var name;  // keep dynamic, , use object determining 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"; // 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], you'll first always:     divchamp.appendchild(imgtag);       var divname = document.createelement("div");     divname.classname = "champ-name";     divname.textcontent = obj.name; // don't use innerhtml assigning text     // cannot append children img tag!     spanbox.appendchild(divname);      // delay attachment in document when have content ready:     document.getelementbyid("myul").appendchild(litag);     }