У меня есть вложенный объектный литерал, который выглядит так.
goals = {
"691473a7-acad-458e-bb27-96bac22467jj": {
category: "personal",
datecreated: "2013-10-20",
goal: "brush teeth--morning",
icon: "health",
status: "completed",
repeat: "no",
username: "jimmysmith",
userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
},
"9e693231-e6d8-4ca9-b5c8-81ea7a8056hh": {
category: "personal",
datecreated: "2013-10-20",
goal: "track spending money",
icon: "dollar",
status: "inprogress",
username: "jimmysmith",
userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
},
"8d23005d-f6f3-4589-bb85-a90510bc45gg": {
category: "personal",
datecreated: "2013-10-20",
goal: "Brush teeth--night",
icon: "health",
status: "inprogress",
username: "jimmysmith",
userguid: "0c7270bd-38e8-4db2-ae92-244de019c543"
}
};
Я могу получить содержимое для правильного отображения на странице с помощью этого:
displayMyGoalList = function() {
var completedHTML, inprogressHTML, missedHTML;
completedHTML = [];
inprogressHTML = [];
missedHTML = [];
$.each(goals, function(index, goal) {
if (goal.userguid === userguid) {
if (goal.category === goalCategory) {
console.log(goal.goal + ' ' + goal.status);
if (goal.status === 'completed') {
return completedHTML.push('<li class="' + goal.status + '" data-userguid="' + goal.userguid + '" data-goalguid="' + index + '"><span class="goaltitle"><i class="fa-large icon-' + goal.icon + '"></i> ' + goal.goal + '</span><span class="goalstatus" data-goal="' + goal.goal + '"><input type="checkbox" checked></span><span class="goalremove"><button type="button" class="btn btn-mini btn-danger removegoal" data-removegoal="' + goal.goalguid + '"><b>X</b> </button></span><span class="chartbutton"><i class="fa-large icon-stats" ></i></span></li>');
} else if (goal.status === 'inprogress') {
return inprogressHTML.push('<li class="' + goal.status + '" data-userguid="' + goal.userguid + '" data-goalguid="' + index + '"><span class="goaltitle"><i class="fa-large icon-' + goal.icon + '"></i> ' + goal.goal + '</span><span class="goalstatus" data-goal="' + goal.goal + '"><input type="checkbox" ></span><span class="goalremove"><button type="button" class="btn btn-mini btn-danger removegoal" data-removegoal="' + goal.goalguid + '"><b>X</b> </button></span><span class="chartbutton"><i class="fa-large icon-stats" ></i></span></li>');
} else {
return missedHTML.push('<li class="' + goal.status + '" data-userguid="' + goal.userguid + '" data-goalguid="' + index + '"><span class="goaltitle"><i class="fa-large icon-' + goal.icon + '"></i> ' + goal.goal + '</span><span class="goalstatus" data-goal="' + goal.goal + '"><input type="checkbox" ></span><span class="goalremove"><button type="button" class="btn btn-mini btn-danger removegoal" data-removegoal="' + goal.goalguid + '"><b>X</b> </button></span><span class="chartbutton"><i class="fa-large icon-stats" ></i></span></li>');
}
}
}
});
$(".goalsinprogress").html(inprogressHTML.join(""));
$(".goalscompleted").html(completedHTML.join(""));
$(".goalsmissed").html(missedHTML.join(""));
return $(".goalsection").css({
visibility: "visible"
}).fadeIn(200);
};
Я могу правильно добавить новый объект цели в вложенный литерал, но html divs не покажет эту новую цель.
$('#savegoal').click(function() {
datecreated = new Date().toString();
goals = JSON.parse(localStorage["goals"]);
goalguid = createGuid();
goals[goalguid] = {
status: "inprogress",
category: $("#thecategory").val(),
goal: $("#thegoal").val(),
icon: $("input[name=icon]:checked").val(),
datecreated: datecreated,
userguid: userguid,
username: username,
recurring: $("input[name=days]:checked").val(),
infotype: $("input[name=theinfotype]:checked").val()
};
localStorage.setItem("goals", JSON.stringify(goals));
$("#addgoalform").hide();
$('#thegoal').val('');
$('#theicon input').removeAttr('checked');
$('#infotype input').removeAttr('checked');
$('#daysoftheweek input').removeAttr('checked');
logSummary();
return displayMyGoalList();
});
Я запускал console.log в нескольких местах вокруг каждого в функции отображения, и все объекты отображались. Но они не присоединяются к нему. Есть идеи?
Я попытался очистить divs с помощью.html('') и с.empty() перед перерисованием, но это не имеет значения.
Большое спасибо, Charlie Magee
Ну, это относится к категории глупых. И объясняет, почему никто не поднял его, пытаясь прокомментировать или ответить.
Полагаю, это стоит здесь вспомнить. Моя проблема была скрыта, но очевидна. Мой $.each работал нормально. Все сводилось к прописной/строчной проблеме. Мой код искал строку под названием "школа", но моя функция фиксировала значение "Школа".
Все, что я должен был сделать в моей социальной функции, - это изменить это
category: $("#thecategory").val(),
к этому
category: $("#thecategory").val().toLowerCase(),