Display JSON as HTML

JSON.stringify output to div in pretty print way

Please use a <pre> tag

demo : http://jsfiddle.net/K83cK/

var data = {  "data": {    "x": "1",    "y": "1",    "url": "http://url.com"  },  "event": "start",  "show": 1,  "id": 50}

document.getElementById("json").textContent = JSON.stringify(data, undefined, 2);

<pre id="json"></pre>

Display JSON data into HTML with jQuery

The data is in JSON format, so it needs to be parsed. It is also an array, so the 2nd element needs to be selected to display the chosen text:

$.ajax({
  url: "https://type.fit/api/quotes",
  method: "GET"
}).then(function(data) {
  data = JSON.parse(data);
  
  $("#text").text(data[1].text);
  $("#author").text(data[1].author);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <p id="text"></p>
  <p id="author"></p>
</div>

How to display the JSON data into HTML?

The problem is that in you are overwriting the var "EducationHistoryData" with each school and only showing the last one.

You should append every school to the html while in the for loop like in my code snipper below.

/* Dataset*/var data = [{
        "Resume": {            "StructuredResume": {                               "EducationHistory": [{                                               "schoolType": "university",                        "Major": "Network Technologies",                        "Degree": {                            "degreeType": "masters",                            "DegreeName": "Master of Technology",                            "DegreeDate": "2018"                        },                        "SchoolName": "some1 University"                    },                    {                                               "schoolType": "university",                        "Major": "Computer Science",                        "Degree": {                            "degreeType": "intermediategraduate",                            "DegreeName": "Graduate Degree",                            "DegreeDate": "2015"                        },                        "SchoolName": "some 2 college"                    },                    {                                                                     "schoolType": "School",                        "Degree": {                            "degreeType": "some school",                            "DegreeDate": "2013"                        },                        "StartDate": "notKnown",                        "SchoolName": "some 3 school"                    }                ]            },           
        }    }
];

var html = '';for (var key in data) {    var i, j;
    var edu = data[key].Resume.StructuredResume.EducationHistory.length;        html += '<div class="col-sm-4">';    html += '<span>' + 'EducationHistory : ' + '</span>';    html += '<br/>'
    for (var j = 0; j < edu; j++) {        var EducationHistoryData = data[key].Resume.StructuredResume.EducationHistory[j].SchoolName;           html += '<span >' + EducationHistoryData + '</span>' +        '<br/>' +        '<br/>';    }       html += '</div>';};console.log()$('#table').html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="row" id="table" style="padding-top:30px"></div>

Display JSON as HTML

JSON.stringify output to div in pretty print way

Display JSON data into HTML with jQuery

How to display the JSON data into HTML?

Related Topics

Leave a reply