在html中添加json文件

时间：2017-03-28 13:37:26

标签： javascript jquery json

我有json文件ticket.json 

"{\"Item1\":[{\"Id\":2,\"Title\":\"Support\",\"TotalUnresolvedItems\":14},{\"Id\":8,\"Title\":\"Helpdesk\",\"TotalUnresolvedItems\":1},{\"Id\":7,\"Title\":\"Hostmaster\",\"TotalUnresolvedItems\":1},{\"Id\":4,\"Title\":\"Salg\",\"TotalUnresolvedItems\":1}],\"Item2\":[{\"Id\":8,\"FullName\":\"person 1\",\"TotalUnresolvedItems\":5},{\"Id\":3,\"FullName\":\"Person 2\",\"TotalUnresolvedItems\":4},{\"Id\":11,\"FullName\":\"Person 3\",\"TotalUnresolvedItems\":3},{\"Id\":14,\"FullName\":\"Person 4\",\"TotalUnresolvedItems\":1},{\"Id\":12,\"FullName\":\"Person 5\",\"TotalUnresolvedItems\":1},{\"Id\":7,\"FullName\":\"Person 7\",\"TotalUnresolvedItems\":1},{\"Id\":4,\"FullName\":\"Person 8\",\"TotalUnresolvedItems\":1}]}"

我试图将它附加到index.html。 到目前为止，我已尝试下面的代码，我可以在console.log中查看json文件。 但我确实得到一个错误XML tolkningsfail，我不明白为什么。 任何人都可以帮助我解决问题。 谢谢。

<html>
<head>
<meta charset=UTF-8>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> </script>

<script>
 $(document).ready(function() {
    var dashboard = [];
   $.getJSON('ticket.json', function(data) {
            data = JSON.parse(data);
        console.log(data);
    var keys = Object.keys(data);
    for (var i = 0; i < keys.length; i++) {
        if (data.hasOwnProperty(keys[i])) {
            $.each(data[keys[i]], function (index, item) {
                var tblRow = "<tr>" + "<td>" + item.Id + "</td>" + "<td>" + item.Title + "</td>" +"<td>" + item.TotalUnresolvedItems + "</td>" + "</tr>"
                var tblRow2 = "<tr>" + "<td>" + item.Id + "</td>" + "<td>" + item.FullName + "</td>" +"<td>" + item.TotalUnresolvedItems + "</td>" + "</tr>"
                $(tblRow).appendTo("#userdata tbody");
                $(tblRow2).appendTo("#userdata2 tbody");
            });
        }
    }
     });
 });
</script>
</head>
<body>

<div class="wrapper">
<div class="profile">
    <table id= "userdata" border="2">
     <thead>
        <th>Id</th>
        <th>Title</th>
        <th>TotalUnresolvedItems</th>
    </thead>
    <tbody>

       </tbody>
   </table>

       <table id= "userdata2" border="2">
     <thead>
        <th>Id</th>
        <th>FullName</th>
        <th>TotalUnresolvedItems</th>
    </thead>
    <tbody>

       </tbody>
   </table>
</div>
</div>
</body>
</html>


$(document).ready(function() {
  var elmJSON = "{\"Item1\":[{\"Id\":2,\"Title\":\"Support\",\"TotalUnresolvedItems\":14},{\"Id\":8,\"Title\":\"Helpdesk\",\"TotalUnresolvedItems\":1},{\"Id\":7,\"Title\":\"Hostmaster\",\"TotalUnresolvedItems\":1},{\"Id\":4,\"Title\":\"Salg\",\"TotalUnresolvedItems\":1}],\"Item2\":[{\"Id\":8,\"FullName\":\"person 1\",\"TotalUnresolvedItems\":5},{\"Id\":3,\"FullName\":\"Person 2\",\"TotalUnresolvedItems\":4},{\"Id\":11,\"FullName\":\"Person 3\",\"TotalUnresolvedItems\":3},{\"Id\":14,\"FullName\":\"Person 4\",\"TotalUnresolvedItems\":1},{\"Id\":12,\"FullName\":\"Person 5\",\"TotalUnresolvedItems\":1},{\"Id\":7,\"FullName\":\"Person 7\",\"TotalUnresolvedItems\":1},{\"Id\":4,\"FullName\":\"Person 8\",\"TotalUnresolvedItems\":1}]}"
    var dashboard = [];
    dashboard.push(JSON.parse(elmJSON));
    //console.log(dashboard);
    dashboard.forEach(function(value){
        //console.log(value)
        for (var key in value) {
          if (value.hasOwnProperty(key)) {
            //console.log(value[key]);
            value[key].forEach(function(val){
              var tblRow = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.FullName + "</td>" +"<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
              var tblRow2 = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.Title + "</td>" +"<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
             
              $(tblRow).appendTo("#userdata tbody");
              $(tblRow2).appendTo("#userdata2 tbody");
             
            })
          }
        }
        
        
   });
   
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="wrapper">
<div class="profile">
    <table id= "userdata" border="2">
         <thead>
            <th>Id</th>
            <th>Title</th>
            <th>TotalUnresolvedItems</th>
        </thead>
        <tbody>

       </tbody>
   </table>
        <table id= "userdata2" border="2">
     <thead>
        <th>Id</th>
        <th>FullName</th>
        <th>TotalUnresolvedItems</th>
    </thead>
    <tbody>

       </tbody>
   </table>
</div>
</div>

2 个答案:

答案 0 :(得分：1)

您需要将其解析为JSON，它当前是表示JSON对象的字符串。

<html>
<head>
<meta charset=UTF-8>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"> </script>

<script>
 $(document).ready(function() {
    var dashboard = [];
   $.getJSON('ticket.json', function(data) {
            data = JSON.parse(data);
        console.log(data);
    var keys = Object.keys(data);
    for (var i = 0; i < keys.length; i++) {
        if (data.hasOwnProperty(keys[i])) {
            $.each(data[keys[i]], function (index, item) {
                var tblRow = "<tr>" + "<td>" + item.Id + "</td>" + "<td>" + item.Title + "</td>" +"<td>" + item.TotalUnresolvedItems + "</td>" + "</tr>"
                $(tblRow).appendTo("#userdata tbody");
            });
        }
    }
     });
 });
</script>
</head>
<body>

<div class="wrapper">
<div class="profile">
    <table id= "userdata" border="2">
     <thead>
        <th>Id</th>
        <th>Title</th>
        <th>TotalUnresolvedItems</th>
    </thead>
    <tbody>

       </tbody>
   </table>
</div>
</div>
</body>
</html>

答案 1 :(得分：1)

获得数据后，您可以执行以下操作：

$(document).ready(function() {
  var elmJSON = "{\"Item1\":[{\"Id\":2,\"Title\":\"Support\",\"TotalUnresolvedItems\":14},{\"Id\":8,\"Title\":\"Helpdesk\",\"TotalUnresolvedItems\":1},{\"Id\":7,\"Title\":\"Hostmaster\",\"TotalUnresolvedItems\":1},{\"Id\":4,\"Title\":\"Salg\",\"TotalUnresolvedItems\":1}],\"Item2\":[{\"Id\":8,\"FullName\":\"André Lund\",\"TotalUnresolvedItems\":5},{\"Id\":3,\"FullName\":\"Arne Hundewadt\",\"TotalUnresolvedItems\":4},{\"Id\":11,\"FullName\":\"Erik Nymand\",\"TotalUnresolvedItems\":3},{\"Id\":14,\"FullName\":\"michael Povlsen\",\"TotalUnresolvedItems\":1},{\"Id\":12,\"FullName\":\"Rene Nicolaj buch\",\"TotalUnresolvedItems\":1},{\"Id\":7,\"FullName\":\"Bjørn Hansen\",\"TotalUnresolvedItems\":1},{\"Id\":4,\"FullName\":\"Jakob Wensien-Jegsen\",\"TotalUnresolvedItems\":1}]}"
    var dashboard = [];
    dashboard.push(JSON.parse(elmJSON));
    dashboard.forEach(function(value, index){;
        for (var key in value) {
          if (value.hasOwnProperty(key)) {
            if(key==='Item1'){
              value[key].forEach(function(val){
                var tblRow = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.Title + "</td>" +"<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
                $(tblRow).appendTo("#userdata tbody");
              })
            }
            if(key==='Item2'){
              value[key].forEach(function(val){
                var tblRow = "<tr>" + "<td>" + val.Id + "</td>" + "<td>" + val.FullName + "</td>" +"<td>" + val.TotalUnresolvedItems + "</td>" + "</tr>"
                $(tblRow).appendTo("#userdata2 tbody");
              })
            }
          }
        }
        
        
   });
   
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <div class="wrapper">
<div class="profile">
    <strong>Item1:</strong>
    <table id= "userdata" border="2">
         <thead>
            <th>Id</th>
            <th>Title</th>
            <th>TotalUnresolvedItems</th>
        </thead>
        <tbody>

       </tbody>
   </table>
   <strong>Item2:</strong>
   <table id= "userdata2" border="2">
         <thead>
            <th>Id</th>
            <th>FullName</th>
            <th>TotalUnresolvedItems</th>
        </thead>
        <tbody>

       </tbody>
   </table>
</div>
</div>

相关问题
最新问题