Dynamically add JSON data into div

Question

I'm facing a small issue in adding data div through JSON. I want that in the main div I can show the Role name and inside that all the branches details one by one. Anyhow, I crack some of the parts but somewhere my code is cracking up. Please help me to create this in a proper manner. My HTML looks like this:

In UI/UX it is taking the branch name of Jenkins too. Don't know where I'm going wrong. And even the last data is not coming.

JSFiddle Link is : https://jsfiddle.net/abhishek_kumar_13092/abLf93t8/139/.

 var div = document.createElement('div');
div.id = "mainContainer";
div.className = "mainContainer";

var innerDiv = document.createElement('div');
innerDiv.id = "innerContainer";
innerDiv.className = "innerContainer"

JSONData.forEach(function(data, index) {
  div.innerHTML += '<div id=' + data.name +  ' class="unitName">' + '<p class="roleName">'+ data.name +'</p>' + '</div>';
  document.getElementById("container").appendChild(div);

    data.branches.forEach((branch)=>{
    innerDiv.innerHTML += '<p id=' + branch.name +  ' class="branchName">' + branch.name + '</p>' 
    
    document.getElementById(data.name).appendChild(innerDiv);
  })
    
})

*"but somewhere my code is cracking up"* - Perhaps you could be a **bit** more specific than that? This is a good opportunity for you to start familiarizing yourself with [using a debugger](https://stackoverflow.com/q/25385173/328193). When you step through the code in a debugger, which operation first produces an unexpected result? What were the values used in that operation? What was the result? What result was expected? Why? To learn more about this community and how we can help you, please start with the [tour] and read [ask] and its linked resources. — David, Oct 20 '22 at 12:33
Thanks, my small issue got resolved. But, now also my last element is not getting details can you please review again? — Abhishek Kumar, Oct 20 '22 at 12:45
Pay attention to the answer I wrote, your last element consisted of two words, which caused it to create `id="Back End"` and then when you searched in the last line for an id with that name you did not find it, you added a hyphen to your data in the name of `Back-End` and it works now — Haim Abeles, Oct 20 '22 at 12:48
Thanks, this solved my problem. Some sort of small mistakes, and I learned a new concept today thanks again. — Abhishek Kumar, Oct 20 '22 at 12:53

score 0 · Accepted Answer · answered Oct 20 '22 at 12:43

You need to initialize the innerDiv in each loop again

var JSONData = [{
  "name": "Jenkins",
  "location": "Pune",
  "role": "Testing",
  "branches": [{
    "name": "Jenkins_pune1",
    "location": "Pune_Hin",
    "role": "Testing_Automation",
    "id": "PUN_HINJE_T122"
  }, {
    "name": "Jenkins_pune2",
    "location": "Pune_DC",
    "role": "Testing_UI",
    "id": "PUN_DC_TDC121"
  }]
}, {
  "name": "UI/UX",
  "location": "Delhi",
  "role": "UI_Dev",
  "branches": [{
    "name": "UIUX_Del1",
    "location": "Del_Sec1",
    "role": "UI",
    "id": "Del_Sec1_T122"
  }, {
    "name": "UIUX_Del2",
    "location": "Del_Sec3",
    "role": "Testing_UI",
    "id": "Del_Sec3_TDC121"
  }]
}, {
  "name": "Back-End",
  "location": "Mumbai",
  "role": "Dev",
  "branches": [{
    "name": "Dev_Mum1",
    "location": "Mum_Sec1",
    "role": "Dev",
    "id": "Mum_Sec1_Dv122"
  }, {
    "name": "Dev_Mum2",
    "location": "Mum_Sec3",
    "role": "Dev",
    "id": "Mum_Sec3_Dev21"
  }]
}]
var div = document.createElement('div');
div.id = "mainContainer";
div.className = "mainContainer";
JSONData.forEach(function(data, index) {
  div.innerHTML += '<div id=' + data.name +  ' class="unitName">' + '<p class="roleName">'+ data.name +'</p>' + '</div>';
  document.getElementById("container").appendChild(div);
  var innerDiv = document.createElement('div');
  innerDiv.id = "innerContainer";
  innerDiv.className = "innerContainer"
  data.branches.forEach((branch)=>{
      innerDiv.innerHTML += '<p id=' + branch.name +  ' class="branchName">' + branch.name + '</p>'  
      document.getElementById(data.name).appendChild(innerDiv);
  })
})

.unitName {
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  padding: 5px;
  margin: auto;
}

#mainContainer {
  width: 80%;
  padding: 5px;
  margin: 5px auto 5px;
  background: whitesmoke;
  align-items: center;
}

.roleName {
  background: crimson;
  width: 80%;
  text-align: center;
  font-weight: 600;
  color: white;
}

<div id="container"></div>

Dynamically add JSON data into div

1 Answers1