How do I parse a json data and output in html?

Question

I've got this json data and I need to replace html with it's data.

I've tried looping through it with .each, but I can't get it to output right.

// json data variable output


{
  "Topic Example Left": [
    "a",
    "b",
    "c",
    "d"
  ],
  "Topic Example Right": [
    "e",
    "f",
    "g",
    "h",

  ]
}

I need to empty check-row-0 and check-row-1 and replace the current results below with the json data.

  // topic example left div

    <div id="check-row-0" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
       <label class="informationTitle">Special Programs</label>
       <div>
          <label class="informationPoint"><i class="fas fa-check"></i>a</label>
       </div>
       <div>
          <label class="informationPoint"><i class="fas fa-check"></i>b</label>
       </div>
       <div>
          <label class="informationPoint"><i class="fas fa-check"></i>c</label>
       </div>
       <div>
          <label class="informationPoint"><i class="fas fa-check"></i>d</label>
    </div>


//topic example right div

<div id="check-row-1" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
   <label class="informationTitle">Special Programs</label>
   <div>
      <label class="informationPoint"><i class="fas fa-check"></i>e</label>
   </div>
   <div>
      <label class="informationPoint"><i class="fas fa-check"></i>f</label>
   </div>
   <div>
      <label class="informationPoint"><i class="fas fa-check"></i>g</label>
   </div>
   <div>
      <label class="informationPoint"><i class="fas fa-check"></i>h</label>
</div>

Thanks for any help!

Kaushik · Accepted Answer · 2019-04-25 01:39:55Z

You can iterate over the JSON and then generate your HTML based on that.

Here is some dummy code, which is not ready for use in production because its not good, and clean, its just for demo purpose.

$(document).ready(function(){
var json = JSON.parse(`{
    "left": [
    "a",
    "b",
    "c",
    "d"
  ],
  "right": [
    "e",
    "f",
    "g",
    "h"

  ]
}`);

var first = $('#check-row-0');
var second = $('#check-row-1');

for(var key in json){
console.log(key);
if(key==="left"){
    for(var j=0; j<json[key].length; j++){
      var div = $('<div/>');
      var icon = $('<i/>').addClass('fas fa-check');
      var label = $('<label/>').addClass('informationPoint').text(json[key][j]);
      label.append(icon);
      div.append(label);
      first.append(div)
    }
}
else if(key==="right"){
    for(var j=0; j<json[key].length; j++){
      var div = $('<div/>');
      var icon = $('<i/>').addClass('fas fa-check');
      var label = $('<label/>').addClass('informationPoint').text(json[key][j]);
      label.append(icon);
      div.append(label);
      second.append(div)
    }
}
}




});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="check-row-0" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
       <label class="informationTitle">Special Programs</label>
       
</div>


<div id="check-row-1" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
   <label class="informationTitle">Special Programs</label>
  
</div>
</div>

vladimir · Accepted Answer · 2019-04-25 01:14:30Z

I would recommend relying on specialized js-library/frameworks, for example angular, knockoutjs etc

Mixing markup and js is bad practice.

See example based on knockoutjs:

jsFiddle working example

Markup

<table>
    <thead>
    </thead>
    <tbody>

      <div id="check-row-0" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
             <label class="informationTitle">Special Programs</label>
             <div data-bind="foreach: topics.left">
                <label class="informationPoint"><i class="fas fa-check" data-bind="text: $data"></i></label>
             </div>       
      </div>

      <div id="check-row-1" class="col-sm-12 col-md-6 col-lg-6 list_column list_column_border">
         <label class="informationTitle">Special Programs</label>

         <div data-bind="foreach: topics.right">
            <label class="informationPoint"><i class="fas fa-check" data-bind="text: $data"></i></label>
         </div>
      </div>

    </tbody>
</table>

JavaScript

ko.applyBindings({
    topics: {
        left: [
            "a",
            "b",
            "c",
            "d"
        ],
        right: [
            "e",
            "f",
            "g",
            "h",

        ]
    }
});

Ryland Goldman · Accepted Answer · 2019-04-25 01:17:09Z

1

You could try to loop through all of the .informationPoint elements and then append the data from parsed JSON:

var json = JSON.parse(`{
    "left": [
    "a",
    "b",
    "c",
    "d"
  ],
  "right": [
    "e",
    "f",
    "g",
    "h"

  ]
}`);
var list = document.getElementsByClassName("informationPoint");
var counter = 0;
for(var a=0;a<json.left.length+1;a++){
    list[a].innerHTML = '<i class="fas fa-check"></i>'+json.left[a];
    counter = a;
  }
for(var b=counter;b<(json.left.length+counter);b++){
    list[b].innerHTML = '<i class="fas fa-check"></i>'+json.right[b-counter];
}

edited Apr 25, 2019 at 1:17

answered Apr 25, 2019 at 1:08

Ryland Goldman

1151 silver badge15 bronze badges

Comments

usmanhaq · Accepted Answer · 2019-04-25 11:18:33Z

1

I had a similar requirement once and created a code for it in Jquery, I was not able to find some plugin at that time, so thought to made that public so that anyone else who require such thing can use that

You can test it at this link

https://usmanulhaq.github.io/json-editor/docs/pages/index.html?page=demo

And github page link is as below

https://github.com/usmanulhaq/json-editor

answered Apr 25, 2019 at 11:18

usmanhaq

1,5771 gold badge9 silver badges12 bronze badges

Collectives™ on Stack Overflow

How do I parse a json data and output in html?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related