javascript - 如何根据 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 对象，例如: {“名称”:“002”，“标题”:“显示 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

为每个复选框设置一个外循环，并通过一个内循环遍历每个 json 元素，根据元素/复选框是否匹配来启用或禁用可能会更容易。

所以你所拥有的东西的倒置:

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

另一个选项(可能不太理想，因为它可能导致多个禁用/启用转换)是禁用所有复选框，并在循环遍历每个元素时启用它们。