javascript - 将jquery数据存储在html元素中

Question

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

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