undefined by json array file using javascript

Question

I have to display images to the browser and I want to get the image from a JSON response and display it to the browser using Javascript. This is what the 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 is an external file, called data.json. I am a beginner. I wrote this 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 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 
    }

It does not display the name and image, but returns a value of undefined. Another problem is that the first li tag is inserted 5 div, then in the first div there are 5 span, the first span there are 5 img tag and the first img tag there are 5 div. How do I solve all these problems?

Please show the (Ajax?) code for retrieving the JSON from your file. — trincot
– trincot, Commented Nov 5, 2016 at 20:56
I dont use ajax. I have written this : <script type="text/javascript" src="data.json"></script> — B.Loga
– B.Loga, Commented Nov 6, 2016 at 9:07
In that case there is no JSON involved, and you are confusing JSON with loading a JavaScript script that assigns a variable with an object literal. This has nothing to do with JSON. If would be JSON if your file would not have var champion = at the start. But then you should load it via an Ajax request, so you can get it assigned to the variable of your choice. — trincot
– trincot, Commented Nov 6, 2016 at 10:07
Also read the usage description of the tag json you tagged your question with. — trincot
– trincot, Commented Nov 6, 2016 at 10:13
I apologize for my low knowledge. thanks for the explanation — B.Loga
– B.Loga, Commented Nov 6, 2016 at 13:56

nvkrj · Accepted Answer · 2016-11-05 21:37:47Z

4

You're using JSON.stringify instead of JSON.parse. While the former converts a JavaScript object to a JSON string, the latter converts a JSON string to a JavaScript object, which you can then access as champ[counter].

For example,

var x = { "a" : 1 }

is a JavaScript object and you can access the element 'a' by x.a, but

var y = JSON.stringify(x)

gives you a string '{ "a" : 1 }', which is neither an object nor an array, and you can not access it like one.

edited Nov 5, 2016 at 21:37

answered Nov 5, 2016 at 20:49

nvkrj

1,0331 gold badge9 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nvkrj Over a year ago

Thanks @Carl I didn't know how you could format code like that (didn't read the instructions properly :))

ste2425 Over a year ago

Sorry to be pedantic but the term JSON object is wrong. It should be JavaScript object. JSON is merely a string format to represent a language agnostic object.

trincot · Accepted Answer · 2016-11-06 10:09:25Z

Your question has nothing to do with JSON. You are loading a JavaScript script that assigns an object literal to the variable champion. This obviously is already a JavaScript object, so you don't need to transform it with JSON.parse (and certainly not with JSON.stringify which makes it ... a string).

Some other issues:

You'll get invalid HTML when adding child elements to an img element. You can instead add that element next to the img element, so they have a common parent.
Don't use getElementsByClassName("champ-div")[0] to find back the element you just created, because this will only work well in the first iteration of the loop. In all other iterations you'll find back the one created in the first iteration, not the one you created in the current iteration. Keep it simple: you still have a variable with that element, so use it.
You modify the images variable in each iteration, making the path invalid in all subsequent iterations. Don't change this variable. Just concatenate the file name to it, but don't store the result back in that variable.
Don't use innerHTML when you want to assign text to an element. It may lead to problems when the text happens to have & or < characters. Instead use textContent
The number of times your loop has to iterate is fixed to 5, which will be a problem when you have fewer elements in champion. Make it more dynamic, and iterate just as many times there are items in champion. for ... of can be handy for this.
Less an issue, but it is better to delay the attachment of an element to the document, until you finished building its content.

Here is the modification of your code that takes these points into account:

// 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);    
}

Collectives™ on Stack Overflow

undefined by json array file using javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related