php - 我的 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

根据图像中显示的数据，数组中有两个元素。使用 $.each() 进行迭代时，第二次迭代采用第二个元素，该元素未定义这些属性，因此它将附加第二个 div 值作为未定义。

---

如果您只想追加数组中的第一个元素，则无需在此处使用 $.each()，只需获取第一个元素并基于该对象即可。

var element = data[0];

$("#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>'
);

---

或者，如果您想从数组中追加多个元素，则添加一个 if 条件来检查这些属性是否已定义。