访问元素内的数组

Question

我正在开发一个Web应用程序，在这种情况下是一个前端，我需要显示Facebook事件。我定义了一个名为events的数组。在每个新活动中我都有：

• id：活动的ID。
• name：活动名称。
• description：事件描述。
• start_date：事件的开始日期。
• end_date：活动的结束日期。
• 参与者：参与活动的阵列
• 图片：活动图片阵列。
• places：事件中的一系列地方。

var events = [];

var new_event = {
    'id': event_id,
    'name': event_name,
    'description': event_description,
    'start_date': event_start_date,
    'end_date': event_end_date,
    'participants' : [],
    'pictures' : [],
    'places' : []
};

然后我创建了几个参与者，图片和地点。

var new_participant = {
    'id': participant_id,
    'name': participant_name,
    'birthDate': participant_birth_date,
    'pictureUrl': participant_photo_url
};

每个新参与者都有变量。

我做了以下推动：

events.push(new_event);
events[i].participants.push(new_participant);

i从0转到events.length - 1。

但是我在浏览器中收到以下错误：

  

未捕获的TypeError：无法读取属性＆＃39;参与者＆＃39;未定义的

将数组推送到javascript元素的正确方法是什么？如何访问它们？

当我尝试访问时：

events[i].participants[0].name

其中i介于0和events.length-1之间，我对name属性的错误相同。

  

未捕获的TypeError：无法读取属性＆＃39; name＆＃39;未定义的

以下是完整代码：

$(document)
    .ready(
        function() {

            var events = [];

            $.ajax({
                type : "GET",
                url : "...",
                dataType : "xml",

                success : function(xml) {


                    $(xml).find('events').each(function() {

                        var event_id = $(this).find('id').text();
                        var event_name = $(this).find('name').text();
                        var event_description = $(this).find('description').text();
                        var event_start_date = $(this).find('startdate').text();
                        var event_end_date = $(this).find('enddate').text();

                        var new_event = {
                            'id': event_id,
                            'name': event_name,
                            'description': event_description,
                            'start_date': event_start_date,
                            'end_date': event_end_date,
                            'participants' : [],
                            'pictures' : [],
                            'places' : []
                        };

                        events.push(new_event);

                    });

                    for(var i=0; i < events.length; i++){
                        $.ajax({
                            type : "GET",
                            url : "...",
                            dataType : "xml",

                            success : function(xml) {

                                $(xml).find('user').each(function() {

                                    var participant_id = $(this).find('id').text();
                                    var participant_name = $(this).find('name').text();
                                    var participant_birth_date = $(this).find('birthDate').text();
                                    var participant_photo_url = $(this).find('pictureUrl').text();

                                    if(participant_name !== ""){
                                        var new_participant = {
                                                'id': participant_id,
                                                'name': participant_name,
                                                'birthDate': participant_birth_date,
                                                'pictureUrl': participant_photo_url
                                            };
                                        events[i].participants.push(new_participant);
                                    }


                                });

                            },
                            error : function(xhr) {
                                alert(xhr.responseText);
                            }
                        });

                        $.ajax({
                            type : "GET",
                            url : "...",
                            dataType : "xml",

                            success : function(xml) {



                                $(xml).find('place').each(function() {

                                    var place_id = $(this).find('id').text();
                                    var place_name = $(this).find('name').text();

                                    if(place_name !== ""){
                                        var new_place = {
                                                'id': place_id,
                                                'name': place_name,
                                            };
                                        events[i].places.push(new_place);
                                        alert("novo local: "+new_place.name);
                                    }
                                });



                            },
                            error : function(xhr) {
                                alert(xhr.responseText);
                            }
                        });

                        $.ajax({
                            type : "GET",
                            url : "...",
                            dataType : "xml",

                            success : function(xml) {



                                $(xml).find('media').each(function() {

                                    var media_id = $(this).find('id').text();
                                    var media_url = $(this).find('url').text();
                                    var media_content = $(this).find('content').text();

                                    if(media_url !== ""){
                                        var new_media = {
                                                'id': media_id,
                                                'url': media_url,
                                                'content' : media_content
                                            };
                                        events[i].pictures.push(new_media);
                                        alert("novo media: "+new_media.url);
                                    }
                                });

                            },
                            error : function(xhr) {
                                alert(xhr.responseText);
                            }
                        });
                    }

                    var result_html = '';
                    var index = 0;

                    result_html += '<div class="f-page f-cover"><div class="cover-elements"><div class="f-cover-story"><span>Life Events</span>Photo Album</div></div><div class="f-cover-flip">&lt; swipe</div></div>';

                    for(var i = events.length; i > 0 ; i -= 5 ){
                        result_html += '<div class="f-page">';
                            result_html += '<div class="f-title">';
                                result_html += '<a href="index.jsp">Back to bookshelf</a>';
                                result_html += '<h2 id="event_name">Your Life Events</h2>';
                                result_html += '<a href="#"></a>';
                            result_html += '</div>';

                            if(index < events.length){
                                $('.img-1').css({'background-image: ': 'url('+events[index].pictures[0].url+')'});
                                result_html += '<div class="box w-25 h-70" id="top_left_box"><div class="img-cont img-1"></div><h3>'
                                            + events[index].name + '<span>Published ' + 'From: ' + events[index].start_date + 'to: ' + events[index].end_date + '</span></h3><p>'
                                            + events[index].description + ' With: ' + events[index].participants[0].name + events[index].participants[0].pictureUrl + '</p></div>';
                                index++;
                            }
                            if(index < events.length){
                                $('.img-2').css({'background-image: ': 'url('+events[index].pictures[0].url+')', 'height: ': '60%'});
                                result_html += '<div class="box w-50 h-70 box-b-l box-b-r" id="top_center_box"><div class="img-cont img-2"></div><h3>'
                                            + events[index].name + '<span>Published ' + 'From: ' + events[index].start_date + 'to: ' + events[index].end_date + '</span></h3><p>'
                                            + events[index].description + ' With: ' + events[index].participants[0].name + events[index].participants[0].pictureUrl + '</p></div>';
                                index++;
                            }   
                            if(index < events.length){
                                $(".img-3").css({'background-image: ': 'url('+events[index].pictures[0].url+')'});
                                result_html += '<div class="box w-25 h-70" id="top_right_box"><div class="img-cont img-3"></div><h3>'
                                            + events[index].name + '<span>Published ' + 'From: ' + events[index].start_date + 'to: ' + events[index].end_date + '</span></h3><p>'
                                            + events[index].description + ' With: ' + events[index].participants[0].name + events[index].participants[0].pictureUrl + '</p></div>';
                                index++;
                            }
                            if(index < events.length){
                                result_html += '<div class="box w-50 h-30 box-b-r title-top" id="bottom_left_box"><h3>'
                                            + events[index].name + '<span>Published ' + 'From: ' + events[index].start_date + 'to: ' + events[index].end_date + '</span></h3><p>'
                                            + events[index].description + ' With: ' + events[index].participants[0].name + events[index].participants[0].pictureUrl + '</p></div>';
                                index++;
                            }
                            if(index < events.length){
                                result_html += '<div class="box w-50 h-30 title-top" id="bottom_right_box"><h3>' 
                                            + events[index].name + '<span>Published ' + 'From: ' + events[index].start_date + 'to: ' + events[index].end_date + '</span></h3><p>'
                                            + events[index].description + ' With: ' + events[index].participants[0].name + events[index].participants[0].pictureUrl + '</p></div>';
                                index++;
                            }
                        result_html += '</div>';

                    }

                    result_html += '<div class="f-page f-cover-back"><div id="codrops-ad-wrapper"><a href="index.jsp" >Back to bookshelf</a></div></div>';
                    $('#flip').html(result_html);

                },

                error : function(xhr) {
                    alert(xhr.responseText
                            + " Error retrieving data from server");
                }


            });



    });

按照以下建议，我得到的是：

$(document)
    .ready(
        function() {

            var events = [];

            $.ajax({
                type : "GET",
                url : "",
                dataType : "xml",

                success : function(xml) {


                    $(xml).find('events').each(function() {

                        var event_id = $(this).find('id').text();
                        var event_name = $(this).find('name').text();
                        var event_description = $(this).find('description').text();
                        var event_start_date = $(this).find('startdate').text();
                        var event_end_date = $(this).find('enddate').text();

                        var new_event = {
                            'id': event_id,
                            'name': event_name,
                            'description': event_description,
                            'start_date': event_start_date,
                            'end_date': event_end_date,
                            'participants' : [],
                            'pictures' : [],
                            'places' : []
                        };

                        events.push(new_event);

                    });


events.forEach(function(event){
                        $.ajax({
                            type : "GET",
                            url : "..."+ event.id + "...",
                            dataType : "xml",

                            success : function(xml) {

                                $(xml).find('user').each(function() {

                                    var participant_id = $(this).find('id').text();
                                    var participant_name = $(this).find('name').text();
                                    var participant_birth_date = $(this).find('birthDate').text();
                                    var participant_photo_url = $(this).find('pictureUrl').text();

                                    if(participant_name !== ""){
                                        var new_participant = {
                                                'id': participant_id,
                                                'name': participant_name,
                                                'birthDate': participant_birth_date,
                                                'pictureUrl': participant_photo_url
                                            };
                                        event.participants.push(new_participant);
                                    }


                                });

                            },
                            error : function(xhr) {
                                alert(xhr.responseText);
                            }
                        });

                        $.ajax({
                            type : "GET",
                            url : "..."+ event.id + "...",
                            dataType : "xml",

                            success : function(xml) {



                                $(xml).find('place').each(function() {

                                    var place_id = $(this).find('id').text();
                                    var place_name = $(this).find('name').text();

                                    if(place_name !== ""){
                                        var new_place = {
                                                'id': place_id,
                                                'name': place_name,
                                            };
                                        event.places.push(new_place);
                                    }
                                });



                            },
                            error : function(xhr) {
                                alert(xhr.responseText);
                            }
                        });

                        $.ajax({
                            type : "GET",
                            url : "..."+ event.id + "...",
                            dataType : "xml",

                            success : function(xml) {

                                $(xml).find('media').each(function() {

                                    var media_id = $(this).find('id').text();
                                    var media_url = $(this).find('url').text();
                                    var media_content = $(this).find('content').text();

                                    if(media_url !== ""){
                                        var new_media = {
                                                'id': media_id,
                                                'url': media_url,
                                                'content' : media_content
                                            };
                                        event.pictures.push(new_media);
                                    }
                                });

                            },
                            error : function(xhr) {
                                alert(xhr.responseText);
                            }
                        });
                        alert(event.participants[0].name);
                        alert(event.pictures[0].url);
                        alert(event.places[0].name);
                    });

名称中仍然存在相同的错误：

Uncaught TypeError: Cannot read property 'name' of undefined 

Answer 1

哟有范围问题。你正在做一个循环，然后在里面调用一个异步函数。当jQuery执行回调时，外部作用域中的变量i已更改其值。关于JavaScript范围有很多问题和答案（简单的搜索将为您提供大量的阅读材料）。

您可以采取Array.prototype.forEach()而不是for循环来避免这些问题。

而不是：

for(var i=0; i < events.length; i++){
                    $.ajax({...});
}

使用：

events.forEach(function(event){
    $.ajax({...
         success: function(){
          ...
             event.participants.push(new_participant)
          ...
         }
    });
});

event值将保持一致，因为循环中的每个函数都有自己的变量。

这是一个很难掌握的问题，我建议你先阅读MDN reference。

Answer 2

如果我这样做就行了

events[0].participants.push(new_participant);
console.log(events);

http://jsfiddle.net/9YU2t/

正如评论中所说，你的错误应来自i变量。用于将内容插入对象时检查其初始化和值。

编辑：问题已经更新。变量i是问题的起源。

另外，以纯粹的程序化方式，我建议按顺序进行

new_event.participants.push(person_1);
new_event.participants.push(person_2);
....
events.push(new_event);