0
我正在開發一個基本上是前端的應用程序，它主要是jQuery和HTML。JS數組推入JS數組
它基本上是一個簡化Facebook事件的前端。這裏是我的代碼：
中的第一個全成請求，我創建了新的事件我即將添加web服務：
在此頁面loadEvents.js我與web服務和店內活動事件的數組內的溝通。
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' : []
};
對於我從返回的xml中讀取的每個事件，我按照以下方式存儲它，它工作正常。
events.push(new_event);
雖然我然後做參與者，圖片和地方，這些事件發生的新的要求。這裏是代碼開始不工作的地方。詳細說明。
每個事件和XML格式的Web服務我
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);
}
我使用的地方和圖片同樣的方法在這裏返回的每個參與者。雖然當我再嘗試使用變量是這樣的：
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">< 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);
}
它告訴我，可變網址，姓名和pictureUrl無法讀取的未定義的屬性。我認爲這可能是我在new_event變量中聲明新數組的方式，或者是我將新元素添加到該數組中的方式。
我有在這裏有一個問題：
events[i].participants.push(new_participant);
它說
19 Uncaught TypeError: Cannot read property 'participants' of undefined
爲什麼會出現這種情況？我設置了所有值都從Web服務獲取完美。我認爲問題在於我在new_event var內部創建參與者並/或者執行此操作。
所以，你可以看到完整的代碼，我做了，如果你想在這裏有雲：
$(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">< 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");
}
});
});
這可能會有所幫助 - http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example?lq=1 – levi
這是一個荒謬的數量的AJAX請求，以加載一些內容。如果可能，請讓服務器腳本生成整個事件對象，並通過JSON將其傳回給JavaScript。 – James
這不是我的問題，但無論如何。請問你看到任何錯誤，爲什麼這不起作用？ –