div не показывает обновление до литерала объекта

0

У меня есть вложенный объектный литерал, который выглядит так.

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

  • 0
    Попробуйте отладить каждый массив с console.log и посмотреть его содержимое
  • 0
    Можете ли вы сделать jsfiddle с некоторым макетом HTML, чтобы я мог видеть, что происходит?
Показать ещё 4 комментария
Теги:
object-literal

1 ответ

0

Ну, это относится к категории глупых. И объясняет, почему никто не поднял его, пытаясь прокомментировать или ответить.

Полагаю, это стоит здесь вспомнить. Моя проблема была скрыта, но очевидна. Мой $.each работал нормально. Все сводилось к прописной/строчной проблеме. Мой код искал строку под названием "школа", но моя функция фиксировала значение "Школа".

Все, что я должен был сделать в моей социальной функции, - это изменить это

category: $("#thecategory").val(),

к этому

category: $("#thecategory").val().toLowerCase(),

Ещё вопросы

Сообщество Overcoder
Наверх
Меню