JS array push inside JS array

Question

I am developing an application that is basically a front-end it is mostly jquery and html.

It is basically a front-end to simplify the facebook events. Here is my code:

in this page loadEvents.js i communicate with webservices and store events inside an array of events:

Inside the first successfull request to the webservices i create the new event i am about to add.

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' : []
};

for each event i read from the returned xml i store it the following way and it works fine.

events.push(new_event);

Although i then make new requests for participants, pictures and places where those events took place. And here is where the code starts not to working. Let elaborate.

for each event and each participant returned by the webservice in xml format i

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);
}

I use the same methodology for places and pictures as in here. although when i then try to use the variables like this:

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++;
        }
       .
       .
       .
       .
       .
       .


        }


        $('#flip').html(result_html);

}

It tells me that variable url, name and pictureUrl cannot read property of undefined. I think it might be the way i am declaring the new arrays inside the new_event variable or the way i am adding new elements into that array.

I am having a problem in here:

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

it says

19 Uncaught TypeError: Cannot read property 'participants' of undefined

why is this happening? i set everything the values are getting fetched from the webservice perfectly. i think the problem is in the way i create the participants inside the new_event var and/or do this push.

So you can see the full code i made if you want here it goes:

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


            });



    });

This may help - http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example?lq=1 — levi, Jul 14 '14 at 19:43
That is a ridiculous amount of AJAX requests to make to load some content. If possible, make your server scripts generate the entire events object and pass it back to javascript via JSON. — James, Jul 14 '14 at 20:15
that is not my question but ty anyway. pls do you see any error why this isn't working? — João, Jul 14 '14 at 20:18
You populate your arrays (i.e. participants and pictures) inside success methods of ajax calls. Have you verified that you are getting correct data back? For example, you have var participant_name = $(this).find('name').text(); and var participant_photo_url = $(this).find('pictureUrl').text(); Have you checked that you are getting data there? If these are undefined then the value of name and pictureUrl will be undefined. Check this. — skarist, Jul 14 '14 at 20:33
OK, but everything else the push and the creation of the arrays inside the event object has the correct sintax? — João, Jul 15 '14 at 09:46
@skarist i have checked that it seems that the problem is that when i make the events[i].participants.push(new_participant) that says that participants is undefined. But i define participants inside new_event var that is an empty array. — João, Jul 15 '14 at 14:18
@João I don't see anything specifically wrong with how you are adding to the participants array, and it should be defined at the point where you are adding to it. I think you just need to pepper your code with console.logs and see what is going on. For example, console.log(events[i]) just before you push to the participants array etc. Good luck — skarist, Jul 15 '14 at 21:59

score 0 · Answer 1 · answered Jul 15 '14 at 13:47

Not sure if this is the cause of your entire issue, but one thing I did notice:

    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++;
    }

You have an extra ' after the :url(...). This is causing this whole statement to be screwed up because certain pieces of code, including result_html, are being treated as strings.

nah thats not the problem he is complaining about the url variable not the '. If you see in the full code the ' is there. — João, Jul 15 '14 at 13:55
Yes, the ' is there in the full code. However, I think you (@João) should do it like this: $('.img-1').css({'background-image': 'url('+events[index].pictures[0].url+')'}); and $('.img-2').css({'background-image': 'url('+events[index].pictures[0].url+')', height: '60%'}); Not that this will fix the original problem. — skarist, Jul 15 '14 at 22:03

JS array push inside JS array

1 Answers1