如何根据 json 数据列表更新 html 项目列表

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":"显示 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
    });
}

另一个选项（可能不太理想，因为它可能会导致多个禁用/启用的转换）是禁用所有复选框，并在循环访问每个元素时启用它们。