代码之家 › 专栏 › 技术社区 › Sai Manoj

如何将JSON数据显示为HTML?

json arrays jquery javascript

Sai Manoj · 技术社区 · 7 年前

预期O/p:

1.学校(学位日期) 2.学院(学位日期)

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

4 回复 | 直到 7 年前

Wouter Bouwman 7 年前

你应该在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>

ADyson 7 年前

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>

Vijay Mishra 7 年前

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

-1

remi leclercq 7 年前

这应该起作用:

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