Как обновить список элементов HTML на основе списка данных JSON

Question

У меня есть список флажков на моей html-странице, например так:

<ul id="myList">
  <li class="checkboxItem">
    <input type="checkbox" name="item1" value="001" id="item-1"/> 
    <label for="item-1" class="checkboxLabel">Display 1</label>
  </li>
  <li class="checkboxItem">
    <input type="checkbox" name="item2" value="042" id="item-2"/>
    <label for="item-2" class="checkboxLabel">Display 42</label>
  </li> 
</ul>

Теперь я звоню, чтобы получить некоторые данные JSON, которые возвращаются примерно так:

[{"name":"002","title":"Display 1"}]

то, что я хочу сделать, это зациклить возвращенный json и обновить список флажков так, чтобы любой элемент, отсутствующий в возвращаемом списке, был отключен, а те, у которых заголовок соответствует данной метке, входное значение обновляется.

так что в этом примере item2 будет отключен, а item1 будет обновляться со значением 002.

вот что у меня есть, я не совсем уверен, куда идти дальше, то есть чтоделать внутри цикла.У меня есть некоторый контроль над тем, как возвращается json, поэтому, если имеет смысл перенастроить json в другом формате, я могу это сделать.

РЕДАКТИРОВАТЬ, обновил функцию, см. Ниже.однако, как только я попадаю внутрь цикла for внутри каждой функции, elem получает значение «0», а не объект js, такой как: {«name»: «002», «title»: «Display 1»}.очевидно, данные передаются из внешней области функции во внутреннюю область каждой функции, но как мне это сделать?

function(data) {
        $('#myList').children('li').each(function(i,e) {
            for(var elem in data) {
                var elemDescr = elem['title'];
                var elemName = elem['name'];
                if(elemDescr==$(this).find('.checkboxLabel').text()) {
                    $(this).find('input').attr('value',elemName);
                }
            }
        });

Answer 1

Я нашел свою проблему. вместо того, чтобы делать:

for(var elem in data) {
            var elemDescr = elem['title'];
            var elemName = elem['name'];

        }

Мне нужно было сделать:

for(var index in data) {
            var elemDescr = data[index].title;
            var elemName = data[index].name;

        }

Answer 2

Может быть проще иметь внешний цикл для каждого флажка, и внутренний цикл проходит через каждый элемент json, включая или отключая его в зависимости от того, совпадают ли элемент / флажки.

Таким образом, инверсиячто у вас есть:

function(data) {
    $('#myList').children('li').each(function() {
        // loop through your data elements here
    });
}

Другой вариант (возможно, менее желательный, потому что он может вызвать несколько отключенных / включенных переходов), состоит в том, чтобы отключить все флажки и включить их при цикле прохождения каждого элемента.