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

您可以使用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...

Answer 2

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

在html元素中存储jquery数据

2 个答案: