Question

实际上，我的JSON中总共有3个不同的对象，其中包括教育详细信息。我可以使用for loop在控制台中显示它们。但是我只能在我的o / p html中显示一个对象。我想将所有三个详细信息推送到我的html页面。我该如何实现？

预期的O / p：教育详情：

1。学校（学位日期） 2.大学（学历） 3.大学（学位）

/* 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>

Answer 1

问题在于，您要用每所学校覆盖var“ EducationHistoryData”，而只显示最后一所学校。

您应该在for循环中将每所学校添加到html，就像下面的代码片段中所述。

/* 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>

Answer 2

这是代码中的一个简单的逻辑缺陷-您正在读取每个单独的教育历史项目的循环之外填充html变量。因此，它仅运行一次，并且仅读取EducationHistoryData变量的最新版本，即上一次运行循环时创建的变量。

您只需要移动代码即可在循环内生成HTML。然后它将对历史的每个项目运行一次，并将该项目附加到输出中。可能还有其他方法可以优化代码，但这是简单的解决方法：

/* 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>

Answer 3

/* 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);

Answer 4

这应该有效：

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>';

如何将JSON数据显示为HTML？

4 个答案: