如何更新基於JSON數據的清單上的HTML項的列表

我有一個複選框列表在我的html頁面，就像這樣：如何更新基於JSON數據的清單上的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將禁用和物品1將其值更新爲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); 
       } 
      } 
     });

來源

2011-03-23 shsteimer

可能更容易具有用於每個複選框的外環和內環經過每個JSON元件，啓用或基於是否所述元件/複選框具有匹配禁用。

所以，你有什麼反轉：

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

另一種選擇（可能不太理想，因爲它可能引起多種禁用/啓用轉換）是禁用所有的複選框，並讓他們爲你遍歷每個元素。

來源

2011-03-23 02:47:13 afranz409

我發現我的問題。而不是做：

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; 

     }

來源

2011-03-23 13:38:17 shsteimer

如何更新基於JSON數據的清單上的HTML項的列表

回答

相關問題