我正在开发一个基本上是前端的应用程序，主要是jquery和html。
它基本上是简化facebook事件的前端。这是我的代码：
在此页面中loadEvents.js我与webservices进行通信并将事件存储在一系列事件中：
在对webservices的第一个成功请求中，我创建了即将添加的新事件。
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);
虽然我随后对参与者，图片和发生这些事件的地方提出了新的要求。这里是代码开始不起作用的地方。让我们详细说明。
对于每个事件以及webservice以xml格式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);
}
我在这里使用与地点和图片相同的方法。虽然我然后尝试使用这样的变量：
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);
}
它告诉我变量url，name和pictureUrl无法读取undefined的属性。我想这可能是我在new_event变量中声明新数组的方式，或者是我在该数组中添加新元素的方式。
我在这里遇到问题：
events[i].participants.push(new_participant);
它说
19 Uncaught TypeError: Cannot read property 'participants' of undefined
为什么会这样？我设置了从网络服务中获取值的所有内容。我认为问题在于我在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");
}
});
});
答案 0 :(得分：0)
不确定这是否是整个问题的原因，但我注意到了一件事：
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++;
}
你有一个额外的＆＃39;在：url（...）之后。这导致整个语句被搞砸了，因为某些代码片段（包括result_html）被视为字符串。