JS数组内的push
JS array push inside JS array
我正在开发一个基本上是前端的应用程序，它主要是jquery和html。
它基本上是一个前端，以简化facebook事件。下面是我的代码:
在这个页面中loaddevents .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);
虽然我然后对参与者，照片和这些事件发生的地方提出新的请求。这就是代码开始不工作的地方。让复杂的。
web服务以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不能读取未定义的属性。我认为这可能是我在new_event变量中声明新数组的方式，或者我在该数组中添加新元素的方式。
我这里有个问题:
events[i].participants.push(new_participant);
上面写着
19 Uncaught TypeError: Cannot read property 'participants' of undefined
为什么会发生这种情况?我设置了所有从webservice获取的值。我认为问题在于我在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");
}
});
});
不确定这是否是您整个问题的原因，但我确实注意到一件事:
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++;
}
在:url(…)后面有一个额外的'。这将导致整个语句被搞砸，因为某些代码片段，包括result_html，被视为字符串。
相关文章：
- TypeError: matrix[y].push 在尝试使用 javascript 创建 2D 数组时不是一个函数
- Javascript:push 不是数组的函数
- 带有jquery .push的Javascript全局数组在备用函数中返回空数组
- 读取通过push生成的数组的值
- "push(）"到Typescript中的数组
- 生成html时，在html数据属性中存储由.push(）填充的数组
- JavaScript:Push数组，在同一索引上有多个值
- 数组长度不随 .push(） 增加
- 在 Javascript 中重新组织对象数组:“未捕获的类型错误:无法读取未定义的属性'push'”
- push 方法将元素添加到数组中不起作用，同时获取具有相同类的元素的 ID 和值
- .push(） 多个对象进入 JavaScript 数组返回 'undefined'
- 如何使用 Javascript push(） 将一组值推送到数组
- 如果不在数组中 -> array.push
- 为什么我的 push(） 方法不断在我的数组中插入一个“未定义”的元素
- 无法将 56AEA43CB6BE380000616B07 之类的字符串$push到 MongoDB 中的数组
- JavaScript 数组为 empty，使用 .push .text
- 有没有一种方法可以实现chain.push和.shift数组方法
- Javascript添加(push)数组与多个数据在auto with循环
- .push数组方法不工作角过滤器
- 我使用Push()数组被使用，我试图从下拉菜单中选择一个列表，并将该列表发布到一个跨度中
