我的jQuery每个函数都显示一个未定义的额外行

Question

我使用$.getJSON和每个函数将json数据显示到html div中。我的警报显示正确的数据，但在将其发布到html主页后，它显示一个额外的div作为未定义的值。

这是我的屏幕截图和代码

$.getJSON(url,function(data) {

                            if(data){
                                alert("hey got the data"+JSON.stringify(data));
                                 var arr = data.length;

                                 //for(var i=0 ;i<arr; i++){

                                   $.each(data, function(i,element) {
                                        $("#postjson").append(  
                                            '<div id="'+element.id+'">'
                                            +'<p>'
                                            +'FirstName:'+element.FirstName+'<br/>'

                                            +'MiddleName:'+element.MiddleName+'<br/>'
                                            +'LastName:'+element.LastName+'<br/>'
                                            +'Gender:'+element.Gender+'<br/>'
                                            +'Location:'+element.Location+'<br/>'
                                            +'Email:'+element.Email+'<br/>'
                                            +'Mobile:'+element.Mobile+'<br/>'
                                            +'</p>'
                                            +'</div>'
                                        );
                                    });
                                   }
                            else {
                                return;             
                            }

                        // once we've loaded
                        // kill the loading stuff
                        ListingCountPage++;
                        loading = false;
                        $(".loading").remove();

                        });
                    }


            $(function() {
            loadData();
        $(window).scroll(function(){

                if  ($(window).scrollTop() == $(document).height() - $(window).height()){
                    // add the loading box
                    if(loading == false){
                        loading = true;
                        $("#postjson").append("<div class='loading'>Loading...</div>");
                        loadData();
                    }

                }
        }); 


      });
            </script>

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

这是如何造成的？我该如何解决？

Answer 1

根据图像中显示的数据，阵列中有两个元素。在使用$query->orderBy([ 'tsell.sell' => SORT_ASC ]); 进行迭代时，第二次迭代采用第二个元素，该元素没有定义这些属性，因此它会将第二个div值附加为未定义。

如果你只想附加数组中的第一个元素，那么不需要在这里使用$.each()，只需获取第一个元素并基于该对象。

$.each()

<小时/> 或者，如果您想从数组追加多个元素，则添加if条件以检查是否已定义这些属性。

Answer 2

数据变量包含两个对象而不是一个，我猜您认为。 BookTitle，BookGenre，BookWriter和BookDescription是FirstName，LastName等未定义的另一个对象

Answer 3

尝试使用两个变量作为personalDetails和bookDetails使Json意味着完整，这样您就可以只迭代个人详细信息，如

$.each(data.personalDetails, function(i,element) {
  // your code here related to personal details
});