javascript - 控制进入循环但不在html div中附加和显示数据

Question

我有 json 数据，我想使用 for 循环在 html div 中显示它。我控制进入循环但不在 html div 中附加和显示数据。

json数据；

[{"id":"15","FirstName":"ranjan","MiddleName":"","LastName":"","Gender":"","Location":"r","Email":"ranjan.gupta.1994@gmail.com","Mobile":""},{"BookTitle":"","BookGenre":"","BookWriter":"","BookDescription":""}]

代码；

$.getJSON(url, function(data) {
            console.log(data);
            if (data) {

                alert("hey got the data" + JSON.stringify(data));
                for (var i = 0; i < data.length; i++) {
                    alert("entered");
                    alert("hey got the data" + JSON.stringify(data[1]));
                    var $appendData =
                        $('<div id="' + data[i].id + '">' + '<p>' 
                        + 'FirstName:' + data[i].data.FirstName + '<br/>' 
                        + 'MiddleName:' + data[i].data.MiddleName + '<br/>' 
                        + 'LastName:' + data[i].data.LastName + '<br/>' 
                        + 'Gender:' + data[i].data.Gender + '<br/>' 
                        + 'Location:' + data[i].data.Location + '<br/>' 
                        + 'Email:' + data[i].data.Email + '<br/>' 
                        + 'Mobile:' + data[i].data.Mobile + '<br/>' 
                        + '</p>' + '</div>').appendTo('#postjson');
                }
            } else {
                return;
            }

//这是我的 div

</script>
        <div class="grid" id="postjson"></div> 
        </div>
</div>

Answer 1

您的循环中有拼写错误，只需将所有 data[i].data.property 替换为 data[i].property

Javascript

    $.getJSON(url,function(data) {

                    console.log(data);
                        if(data){

                            alert("hey got the data"+JSON.stringify(data));
                            for(var i=0; i<data.length; i++) {  
                                    alert("entered");
                                    alert("hey got the data"+JSON.stringify(data[1]));

                                        $('<div id="'+data[i].id+'">'
                                        +'<p>'
                                        +'FirstName:'+data[i].FirstName+'<br/>'
                                        +'MiddleName:'+data[i].MiddleName+'<br/>'
                                        +'LastName:'+data[i].LastName+'<br/>'
                                        +'Gender:'+data[i].Gender+'<br/>'
                                        +'Location:'+data[i].Location+'<br/>'
                                        +'Email:'+data[i].Email+'<br/>'
                                        +'Mobile:'+data[i].Mobile+'<br/>'
                                        +'</p>'
                                        +'</div>').appendTo('#postjson');




                                  }



                               }
                        else {
                            return;             
                        }

JsFiddle