Javascript 访问元素内部的数组

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

• id：事件的id
• 名称：事件的名称
• 描述：事件的描述
• 开始日期：事件的开始日期
• 结束日期：事件的结束日期
• 参与者：事件参与者的阵列
• 图片：活动的图片阵列
• 地点：事件中的地点数组

然后我创建了几个参与者、图片和场所

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:无法读取未定义的属性“参与者”

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

当我尝试访问时：

events[i].participants[0].name

如果

i

介于0和

events.length-1

之间，则

name

属性会出现相同的错误

未捕获的TypeError:无法读取未定义的属性“name”

以下是完整的代码：

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


            });



    });

名称中仍有相同的错误：

Uncaught TypeError: Cannot read property 'name' of undefined 

如果我这样做，它会起作用

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

正如评论中所说，您的错误应该来自

i

变量。当用于将内容插入对象时，请检查其初始化和值

编辑：因为问题已更新。变量

i

是问题的根源

另外，以一种纯粹的编程方式，我建议按照这个顺序进行

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

---

你有范围问题。您正在执行一个循环，然后在其中调用一个异步函数。当jQuery执行回调时，外部作用域中的变量

i

已更改其值。关于JavaScript范围有很多问题和答案（一个简单的搜索会给你很多阅读材料）

要避免这些问题，可以使用

Array.prototype.forEach（）

而不是

for

循环

而不是做：

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

事件

值将是一致的，因为循环中的每个函数在其各自的范围内都有自己的变量

---

这是一个很难理解的问题，我建议您从阅读开始。

当您尝试访问

事件[I]

时，

I

的值是多少？请创建一个我们可以查看并尝试的。我们无法知道您的代码中发生了什么。@João您的意思是

events.length-1

？；）我想你是在循环这个，也许是在一个

for

循环中？向我们展示涉及

i

变量的代码片段……从这里，我只有更新代码的一半是红色的，我可以看到两个问题。首先，Jquery

。each（）

函数用于循环DOM元素，而不是javascript对象。改用

$.each（）

。第二，由于AJAX是异步的，您不能假设在AJAX调用完成后将执行

for循环

，但请尝试这样做。事件[0]。参与者[0]。名称您将收到与我相同的错误。我是有效的，因为我已经尝试过它，并且可以证明它是arrraytry的有效索引：而且这个解决方案也有效：@TCHdvlp，看看更新的问题（有完整的代码），这是由$.ajax调用派生的闭包问题：P@rvignacio你能详细说明一下吗？TY我已经编辑了我的代码，进行了您建议的更改，但结果相同。这是因为您在

$.ajax

调用之后立即调用了

alert（）

。JavaScript IO是异步的，它不会按照您编写代码的顺序执行代码，这就是使用回调的原因。现在我没有错误，但是我不能打印html元素，因为正如你在for循环中看到的那样，我每次需要打印5个。如果没有索引或类似的东西，我无法做到这一点。我需要能够使循环从最后一个元素到第一个元素，并且每次折扣5。

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

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

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