在html元素中存儲jquery數據

Question

我想將我從我的getJSON中獲得的數據作爲列表存儲在我的html元素中。
這裏是我的腳本​​：

$.getJSON("dataset.json", function(obj) { 
    obj.types.forEach(function(key) { 
     console.log(key.type); 
    }); 
}); 

控制檯日誌是鍵列表：

one 
two 
three 
four 

和我的html代碼：

<div class="row"> 
    <div class="col-sm-offset-1 col-sm-11 col-md-offset-1 col-md-11"> 
     <div class="item-group"> 
      <label class="item-label">List</label> 
       <ul class="list-unstyled" id="dataList"></ul> 
      <br> 
     </div> 
    </div> 
</div> 

我怎麼能傳遞結果從getJSON到id="dataList"？

Answer 1

//example data 
 
var data = [{value:'one'},{value:'two'},{value:'three'},{value:'four'}]; 
 
data.forEach(function(item){ 
 
$('#dataList').append('<li>'+ item.value +'</li>'); 
 
}); 
 
//selects the element with id #dataList and adds each value

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-sm-offset-1 col-sm-11 col-md-offset-1 col-md-11"> 
 
     <div class="item-group"> 
 
      <label class="item-label">List</label> 
 
       <ul class="list-unstyled" id="dataList"> 
 
       </ul> 
 
      <br> 
 
     </div> 
 
    </div> 
 
</div>

Answer 2

您可以製作這些值的數組，並使用data()方法將其與元素一起存儲。試試這個：

$.getJSON("databeta.json", function(obj) { 
    $('#dataList').data('types', obj.types.map(function(o) { 
     return o.type; 
    })); 
}); 

然後，在後面的代碼需要時可以檢索數組：

var arr = $('#dataList').data('types'); 
// use arr as needed here...