Problem load data inside element in JavaScript

Question

I have a problem with JavaScript.Inside my Array I have some objects and I tried to load all of them inside some Elements , Problem is when I tried return my Elements inside "for" and set objects for each one it's not work, I mean it just return last one with data and other box (elements) are empty

This is my JavaScript Code

var dataStore = [{
    fname: "Keira",
    lname: "Mayo",
    yold: 30
},
{
    fname: "Isaac",
    lname: "Moses",
    yold: 20
},
{
    fname: "Edwina",
    lname: "Serena",
    yold: 34
},
{
    fname: "Tiana",
    lname: "Cheryl",
    yold: 26
},
];


var boxShow = `
                
                    
                        
                            
                                
                                       
                                    


                                
                            
                            
                                
                                    Done
                                    Delete
                                
                            
                        
                    
                

                `;


    for (var i = 0; i <= dataStore.length; i++) {
        var show = document.getElementById("MainBox").innerHTML += (boxShow);

        var boxes = document.getElementById("boxMsg");

        boxes.querySelector("#titMsg").textContent = dataStore[i].fname  + " " +  dataStore[i].lname;
        boxes.querySelector("#yold").textContent = dataStore[i].yold;
    }

user_846053 · Answer

I think you need to concatenate all articles in the for loop. Then only you append to the dom.





    
    
    
    Document

user_1495561 · Answer

You use in anormal way getElementById, it don't respect the standard W3C. ID can use only for one time and the id is unique. You can't indentify multiple tag with the same id. Change logic and win. Use Angular/Vue is better, the major part is already done for you.

Problem load data inside element in JavaScript

2 Answers