CODEWITHSUNDEEP
javascriptjqueryarraysjson
Sai Manoj
Sai Manoj

Reputation: 3849

How to display the JSON data into HTML?

Actually I have total 3 different objects consisting of education details in my JSON. I'm able to display them in console using for loop.But i'm able to display only one object in my o/p html. I want to push all the three details to my html page. How can I achieve that?

Expected O/p : Education Deatils:

1.school(degree date) 2.college(degree date) 3.university(degree date)

/* 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;
    console.log(edu)

       
    for (var j = 0; j < edu; j++) {
        var EducationHistoryData = data[key].Resume.StructuredResume.EducationHistory[j].SchoolName;
        console.log(EducationHistoryData);
    }


    html += '<div>';
   
    html += '<span>' + 'EducationHistory : ' + '</span>' + '<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 id="table" style="padding-top:30px"></div>

Upvotes: 1

Views: 337

Answers (4)

Vijay Mishra
Vijay Mishra

Reputation: 9

/* 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;
    console.log(edu)


    for (var j = 0; j < edu; j++) {
        var EducationHistoryData = data[key].Resume.StructuredResume.EducationHistory[j]['Degree'].DegreeDate;
        var schoolType = data[key].Resume.StructuredResume.EducationHistory[j]['Degree'].degreeType
        console.log(EducationHistoryData);
        html += '<div class="col-sm-4">';

    html += '<span>' + schoolType + ': </span>' + '<span >' + EducationHistoryData + '</span>' +
        '<br/>' +
        '<br/>';

    html += '</div>';
};
    }
$('#table').html(html);

Upvotes: 0

remi leclercq
remi leclercq

Reputation: 44

This should work : 

var test = data.Resume.StructuredResume.EducationHistory;
html += '<div>';
html += '<span>' + 'EducationHistory : ' + '</span>'
for(var i = 0; i < test.length; i++){
   html += '<span >' + test[i].SchoolName + '</span>' +
    '<br/>' +
    '<br/>';
}
html += '</div>';

Upvotes: -1

ADyson
ADyson

Reputation: 61859

It's a simple logic flaw in your code - you're populatating your html variable outside the loop where you read each individual education history item. Therefore it only runs once, and only ever reads the last version of the EducationHistoryData variable, the one which was created the last time the loop ran.

You just need to move the code to generate the HTML inside the loop. Then it will run once for each item of history, and append that item to the output. There are probably other ways to optimise your code but this is the simple fix:

/* 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;
  //console.log(edu)

  for (var j = 0; j < edu; j++) {
    var EducationHistoryData = data[key].Resume.StructuredResume.EducationHistory[j].SchoolName;
    //console.log(EducationHistoryData);

    html += '<div>';
    html += '<span>' + 'EducationHistory : ' + '</span>' + '<span >' + EducationHistoryData + '</span>' +
      '<br/>' +
      '<br/>';
    html += '</div>';
  }
};
//console.log(html)
$('#table').html(html);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table"></div>

Upvotes: 2

Wouter Bouwman
Wouter Bouwman

Reputation: 1013

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>

Upvotes: 2

Related Questions