JSON数据未显示在html表中

HTML code:

<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
        $(function() {
            var entries = [];
            var dmJSON = "data.json"; <!--my JSON filename--> 
            $.getJSON(dmJSON, function(data) {
                $.each(data.entries, function(i, f) {
                    var tblRow = "<tr>" + "<td>" + f.id + "</td>" + "<td>" + f.user.username + "</td>" + "<td>" + f.message + "</td>" + "<td> " + f.location + "</td>" + "<td>" + f.at + "</td>" + "</tr>"
                    $(tblRow).appendTo("#entrydata tbody");
                });

            });

        });
    </script>
</head>

<body>

    <div class="wrapper">
        <div class="profile">
            <table id="entrydata" border="1">
                <thead>
                    <th>Clue</th>
                    <th>Answer</th>
                    <th>Status</th>
                    <th>Views</th>
                    <th>Time</th>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</body>    
</html>

JSON data:

[{
    "entry1": {
        "Clue": "First Clue",
        "Answer": "Answer to the first clue",
        "Status": "Rejected",
        "Views": "10"
    }
}, {
    "entry2": {
        "Clue": "Second Clue",
        "Answer": "Answer to the second clue",
        "Status": "Amazing",
        "Views": "15"
    }
}, {
    "entry3": {
        "Clue": "Third Clue",
        "Answer": "Answer to the third clue",
        "Status": "Spectacular",
        "Views": "25"
    }
}, {
    "entry4": {
        "Clue": "Fourth Clue",
        "Answer": "Answer to the fourth clue",
        "Status": "Rejected",
        "Views": "4"
    }
}, {
    "entry5": {
        "Clue": "Fifth Clue",
        "Answer": "Answer to the fifth clue",
        "Status": "Amazing",
        "Views": "30"
    }
}, {
    "entry6": {
        "Clue": "Sixth Clue",
        "Answer": "Answer to the sixth clue",
        "Status": "Spectacular",
        "Views": "110"
    }
}, {
    "entry7": {
        "Clue": "Seventh Clue",
        "Answer": "Answer to the seventh clue",
        "Status": "Rejected",
        "Views": "7"
    }
}, {
    "entry8": {
        "Clue": "Eigth Clue",
        "Answer": "Answer to the eigth clue",
        "Status": "Amazing",
        "Views": "55"
    }
}
}

I have 8 entries in my JSON file, I want to store it in 8 different tables but my script is not reading the JSON data.

我的JSON文件中有8个条目,我想将它存储在8个不同的表中,但我的脚本没有读取JSON数据。

Also how to dynamically create tables? Any solution to this would be helpful.

另外如何动态创建表?任何解决方案都会有所帮助。

1 个解决方案

#1

you are trying to get the properties from object that does not exist HTML

您正试图从不存在HTML的对象获取属性

<div class="wrapper">
   <div class="profile">
   <table id= "entrydata" border="1">
      <thead>
         <th>Clue</th>
         <th>Answer</th>
         <th>Status</th>
         <th>Views</th>
         <th>Time</th>
      </thead>
     <tbody>
     </tbody>
   </table>
   </div>
</div>

SCRIPT

var dmJSON = [
    {
         "entry1":{
                      "Clue":"First Clue",
                      "Answer": "Answer to the first clue",
                      "Status": "Rejected",
                      "Views" : "10"

         }
    },
    {
         "entry2":{
                      "Clue":"Second Clue",
                      "Answer": "Answer to the second clue",
                      "Status": "Amazing",
                      "Views" : "15"

         }
    },
    {
         "entry3":{
                      "Clue":"Third Clue",
                      "Answer": "Answer to the third clue",
                      "Status": "Spectacular",
                      "Views" : "25"

         }
    },
    {
         "entry4":{
                      "Clue":"Fourth Clue",
                      "Answer": "Answer to the fourth clue",
                      "Status": "Rejected",
                      "Views" : "4"

         }
    },
    {
         "entry5":{
                      "Clue":"Fifth Clue",
                      "Answer": "Answer to the fifth clue",
                      "Status": "Amazing",
                      "Views" : "30"

         }
    },
    {
         "entry6":{
                      "Clue":"Sixth Clue",
                      "Answer": "Answer to the sixth clue",
                      "Status": "Spectacular",
                      "Views" : "110"

         }
    },
    {
         "entry7":{
                      "Clue":"Seventh Clue",
                      "Answer": "Answer to the seventh clue",
                      "Status": "Rejected",
                      "Views" : "7"

         }
    },
    {
         "entry8":{
                      "Clue":"Eigth Clue",
                      "Answer": "Answer to the eigth clue",
                      "Status": "Amazing",
                      "Views" : "55"

         }
    }
]; 
$.each(dmJSON, function(i, f) {
    i = i+1;
    var tblRow = "<tr>" + "<td>" + f['entry'+ i].Clue + "</td>" + "<td>" + f['entry'+ i].Answer + "</td>" + "<td>" + f['entry'+ i].Status + "</td>" + "<td> " +
        f['entry'+ i].Views + "</td></tr>"
    $(tblRow).appendTo("#entrydata tbody");
 });

DEMO

#1