JSON至Ajax中的HTML表

Question

這是我擁有的JSON

{
   "version": "5.2",
   "user_type": "online",
   "user":
   [
       {
            "name": "John",
            "id": 50
       },
       {
            "name": "Mark",
            "id": 57
        }
    ]
}

將上述JSON轉換為HTML的JavaScript

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url: "http://PATH/user.json",
        dataType: 'json',
        type: 'get',
        cache:false,
        success: function(data){
            /*console.log(data);*/
            var event_data = '';
            $.each(data, function(index, value){
                /*console.log(value);*/
                event_data += '<tr>';
                event_data += '<td>'+value.name+'</td>';
                event_data += '<td>'+value.id+'</td>';
                event_data += '<tr>';
            });
            $("#list_table_json").append(event_data);
        },
        error: function(d){
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
});
</script>

table的HTML代碼：

<table class="table table-responsive table-hover table-bordered" id="list_table_json">
    <thead>
        <tr>
            <th>Name</th>
            <th>ID</th>                  
        </tr>                   
    </thead>
</table>

控制台中沒有任何錯誤

我在表中得到的輸出表示未定義。 如何將數據推送到json？

Answer 1

您的循環應類似於$.each(data.user, function(index, value){}); 最后關閉</tr>

<script type="text/javascript">
$(document).ready(function(){
    $.ajax({
        url: "http://PATH/user.json",
        dataType: 'json',
        type: 'get',
        cache:false,
        success: function(data){
            /*console.log(data);*/
            var event_data = '';
            $.each(data.user, function(index, value){
                /*console.log(value);*/
                event_data += '<tr>';
                event_data += '<td>'+value.name+'</td>';
                event_data += '<td>'+value.id+'</td>';
                event_data += '</tr>';
            });
            $("#list_table_json").append(event_data);
        },
        error: function(d){
            /*console.log("error");*/
            alert("404. Please wait until the File is Loaded.");
        }
    });
});
</script>

Answer 2

您必須更改代碼的這一部分：

$.each(data.user, function(index, value){
    /*console.log(value);*/
    event_data += '<tr>';
    event_data += '<td>'+value.name+'</td>';
    event_data += '<td>'+value.id+'</td>';
    event_data += '</tr>';
});

Answer 3

在這種情況下，我可以推薦Vue。 尋找下一個（有效的）示例：

 var table = new Vue({ el: '#dynamic', data: { users: [] } }) // And on click just assign loaded JSON to component model // and view (table) will be re-rendered automatically $('button').click(_ => $.getJSON('https://api.mockaroo.com/api/03f2c610?count=20&key=cdbbbcd0') .done(data => table.$data.users = data) ) 

 #dynamic { border-collapse: collapse; } #dynamic th, #dynamic td { border: 1px solid black; } 

 <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> <button>Load some fake data from mockaroo.com</button> <!-- Prepare table in clean, readable way --> <table id="dynamic"> <thead> <tr> <th>ID</th> <th>Nick</th> <th>First name</th> <th>Last name</th> <th>Email</th> </tr> </thead> <tbody> <tr v-for="row in users"> <td v-for="column in row">{{ column }}</td> </tr> </tbody> </table> 

現在，如果您希望該表可排序，則只需幾行代碼即可：

 var table = new Vue({ el: '#dynamic', data: { users: [] }, methods: { sort (e) { // This is the method definition var key = e.target.dataset.key // read data-key value from clicked th this.users = _.sortBy(this.users, key) // sortBy method is from underscore } } }) // And on click just assign loaded JSON to component model // and view (table) will be re-rendered automatically $('button').click(_ => $.getJSON('https://api.mockaroo.com/api/03f2c610?count=20&key=cdbbbcd0') .done(data => table.$data.users = data) ) 

 #dynamic { border-collapse: collapse; } #dynamic th, #dynamic td { border: 1px solid black; } #dynamic th { cursor: pointer; } 

 <script src="https://unpkg.com/jquery@3.2.1/dist/jquery.min.js"></script> <script src="https://unpkg.com/vue@2.4.2/dist/vue.min.js"></script> <!-- Underscore have some great methods for lists, array and objects --> <script src="https://unpkg.com/underscore@1.8.3/underscore-min.js"></script> <button>Load some fake data from mockaroo.com</button> <!-- Prepare table in clean, readable way --> <table id="dynamic"> <thead> <tr @click="sort"><!-- Run sort method on click --> <th data-key="id">ID</th> <th data-key="nick">Nick</th> <th data-key="first">First name</th> <th data-key="last">Last name</th> <th data-key="email">Email</th> </tr> </thead> <tbody> <tr v-for="row in users"> <td v-for="column in row">{{ column }}</td> </tr> </tbody> </table>