Javascript JSON loop result getting bigger

user_13556642 0
Viewed 46

I have an issue with my Javascript loop. How more IDs how bigger the results

<script>
var jsondata = {"45":    {"id":"45","firstname":"Remy","lastname":"Janssen","age":"32"},"72":{"id":"72","firstname":"Anita","lastname":"Janssen","age":45}};

function display( jsdata ){
    var htmltabel = '';
    for ( var key in jsdata ){
        var datanode = document.createElement("div");
        htmltabel += '<div class="id">' + jsdata[key]['id']    + '</div>';
        content    = htmltabel;
        datanode.innerHTML = content;
        document.getElementById("result").appendChild(datanode);
    }
}
</script>
<div class="result" id="result"></div>
<script>display(jsondata);</script>

The result is

<div class="result" id="result">
    <div>
        <div class="id">45</div>
    </div>
<div>
    <div class="id">45</div>
    <div class="id">72</div>
</div>

I am looking for this result

<div class="result">
    <div class="id">45</div>
    <div class="id">72</div>
</div>
arrays json javascript
2 Answers

Just use the datanode you created, no need for an inner div, if you don't want one.

<script>
var jsondata = {"45":    {"id":"45","firstname":"Remy","lastname":"Janssen","age":"32"},"72":{"id":"72","firstname":"Anita","lastname":"Janssen","age":45}};

function display( jsdata ){
    for ( var key in jsdata ){
        var datanode = document.createElement("div");
        datanode.className = 'id';
        datanode.innerHTML = jsdata[key]['id'];
        document.getElementById("result").appendChild(datanode);
    }
}
</script>
<div class="result" id="result"></div>
<script>display(jsondata);</script>
user_35240760

You might be overcomplicating it, see a simplified version that gives your required output:

var jsondata = {
  "45": {
    "id":"45",
    "firstname":"Remy",
    "lastname":"Janssen",
    "age":"32"
  },
  "72": {
    "id":"72",
    "firstname":"Anita",
    "lastname":"Janssen",
    "age":45
  }
};

function display( jsdata ) {
    for (var key in jsdata) {
        let datanode = document.createElement("div");
        datanode.classList.add('id'); // usnure why you are doing this.
        let text = document.createTextNode(jsdata[key]['id']);
        datanode.appendChild(text);
        document.getElementById("result").appendChild(datanode);
    }
}

display(jsondata);
<div class="result" id="result"></div>

user_16542310
Related