在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...