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 = `
                <div class="box" id="boxMsg">
                    <article class="media">
                        <div class="media-content">
                            <div class="content">
                                <p >
                                    <strong id="titMsg"> </strong> <small id="yold"> </small>
                                    <br>

                                </p>
                            </div>
                            <nav class="level is-mobile">
                                <div class="level-left">
                                    <a class="level-item button is-small has-background-primary has-text-light disabled" aria-label="done" id="doneBtn"  >Done</a>
                                    <a class="level-item button is-small has-background-danger has-text-light" aria-label="delete" id="delBtn">Delete</a>
                                </div>
                            </nav>
                        </div>
                    </article>
                </div>

                `;


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

What is your HTML? It looks like you have duplicate IDs in it, which is invalid syntax — CertainPerformance
– CertainPerformance, Commented Jan 9, 2019 at 9:14
The boxshow html has an element with an id, yet you add it to your content multiple times. The result is more elements with the same id — Michiel
– Michiel, Commented Jan 9, 2019 at 9:17
To give you a start, you can not have 2 same id on elements, now think about that and implement. — Just code
– Just code, Commented Jan 9, 2019 at 9:18
my HTML ` <div class="column"> <div id="MainBox"> </div> </div> ` — Milad
– Milad, Commented Jan 9, 2019 at 9:31

xwlee · Accepted Answer · 2019-01-09 09:44:06Z

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="MainBox"></div>
    <script>
        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 = `<div class="box" id="boxMsg"></div>`;
        var elements = '';

        for (var i = 0; i < dataStore.length; i++) {
            elements += `<article class="media">
                            <div class="media-content">
                                <div class="content">
                                    <p>
                                        <strong>${dataStore[i]['fname']}</strong> <small>${dataStore[i]['lname']} </small>
                                        <br>
                                    </p>
                                </div>
                                <nav class="level is-mobile">
                                    <div class="level-left">
                                        <a class="level-item button is-small has-background-primary has-text-light disabled" aria-label="done" id="doneBtn"  >Done</a>
                                        <a class="level-item button is-small has-background-danger has-text-light" aria-label="delete" id="delBtn">Delete</a>
                                    </div>
                                </nav>
                            </div>
                        </article>`;
        }

        document.getElementById("MainBox").innerHTML += (boxShow);
        document.getElementById("boxMsg").innerHTML += elements;
    </script>
</body>

</html>

Kolzar · Accepted Answer · 2019-01-09 09:21:44Z

0

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.

answered Jan 9, 2019 at 9:21

Kolzar

8811 gold badge13 silver badges25 bronze badges

1 Comment

Kolzar Over a year ago

ok, but it's wrong. You must use class instead id, you can use but the way is wrong.

Collectives™ on Stack Overflow

Problem load data inside element in JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related