如何使用Javascript或Jquery将一系列JSON数据附加到HTML？

Question

我想做的是分解从JSON文件中获取的内容。 例如说我的JSON数据如下所示：

{
"paintings": {
  "painting": [
    {
    "title": "Boardwalk 5",
    "artist": "Arnie Palmer",
    "image": "ap1.jpg",
    "price": 850
    },
    {
    "title": "A Lasting Piece",
    "artist": "Arnie Palmer",
    "image": "ap2.jpg",
    "price": 450
    },
    {
    "title": "Surf at High Tide",
    "artist": "Arnie Palmer",
    "image": "ap3.jpg",
    "price": 950
    },
    {
    "title": "The Games We Play",
    "artist": "Arnie Palmer",
    "image": "ap4.jpg",
    "price": 850
    }
  ]
} 
}

我想将JSON数组中的前2个项目附加到<div class="area1"> ，然后将项目3和4附加到<div class="area2"> 。 这是我提取所有数据的方式：

$(document).ready(function () {
$.ajax({
    type: 'GET',
    url: 'data.json',
    dataType: 'json',
    success: jsonParser
});
});

function jsonParser(json) {
$('#load').fadeOut();

$.getJSON('data.json', function(data){
    $.each(data.paintings.painting, function(k,v){
        var title = v.title;
        var img = v.image;
        var price = v.price;
///here is where I need help
        $('.area1').append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>')
    });
});
}

这是我的HTML：

<body>
<div class="area1">...first half of JSON data here... </div>
<div class="area2">... second half of JSON data here </div>
</body>

因此，一个JSON文件的数据被分解，然后附加到两个区域

Answer 1

您只需要检查each()函数中的索引（ k ）即可确定要添加到哪个区域：

$.getJSON('data.json', function(data){
    $.each(data.paintings.painting, function(k,v){
        var title = v.title;
        var img = v.image;
        var price = v.price;

        // k is the index in the array. indexes 0 and 1 go to area1. 2 and 3 go to area2
        var areaid = k < 2 ? '.area1' : '.area2';
        $(areaid).append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>')
    });
});

Answer 2

尝试这个：

<script>
    var url = "json.json";
    $.getJSON(url, function(data) {
        $.each(data.paintings.painting, function(k, v) {
            var title = v.title;
            var img = v.image;
            var price = v.price;
            if (k < 2) {
                $('.area1').append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>');
            } else {
                $('.area2').append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>')
            }

        });
    });
</script>

Answer 3

比@Rhumborls解决方案更详细。

 $.getJSON('data.json', function(data) { $.each(data.paintings.painting, function(k, v) { var title = v.title; var img = v.image; var price = v.price; var areaid; switch (k) { case 0: case 1: areaid = '.area1'; break; case 2: case 3: areaid = '.area2'; break; } $(areaid).append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>') }); });

甚至更具可扩展性

 $.getJSON('data.json', function(data) { $.each(data.paintings.painting, function(k, v) { var title = v.title; var img = v.image; var price = v.price; // We figure out the area to append to by rounding down to nearest 10 and plus by 1 // key of 0-9 becomes 1, key of 10-19 becomes 2 ie var areaid = '.area' + (Math.round(k / 10) + 1); $(areaid).append('<div class="painting"><img src="images/' + img + '" width="200" height="225" alt="' + title + '" /><br/><div class="title">' + title + '<br/>$' + price + '</div></div>') }); });

如何使用Javascript或Jquery将一系列JSON数据附加到HTML？

问题描述

3 个解决方案

解决方案1
1 2014-10-28 12:33:18

解决方案2
0 2014-10-28 12:36:30

解决方案3
0 已采纳 2014-10-28 12:38:31

如何使用Javascript或Jquery将一系列JSON数据附加到HTML？

问题描述

3 个解决方案

解决方案1 1 2014-10-28 12:33:18

解决方案2 0 2014-10-28 12:36:30

解决方案3 0 已采纳 2014-10-28 12:38:31

解决方案1
1 2014-10-28 12:33:18

解决方案2
0 2014-10-28 12:36:30

解决方案3
0 已采纳 2014-10-28 12:38:31