在html元素中存储jquery数据

I want to store the data I get from my getJSON in my html element as a list.
here is my script data.js:

我想将我从getJSON获取的数据存储在我的html元素中作为列表。这是我的脚本data.js：

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

the console log is a list of keys:

控制台日志是一个键列表：

one
two
three
four

and my html code:

和我的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>

how can I pass the result from getJSON into the id="dataList" ?

如何将getJSON的结果传递给id =“dataList”？

2 个解决方案

#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>

#2

You can make an array of those values and store it with the element using the data() method. Try this:

您可以使用data（）方法创建这些值的数组并将其与元素一起存储。尝试这个：

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

Then, when required later in your code you can retrieve that array:

然后，当您的代码稍后需要时，您可以检索该数组：

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