Question

我有一个作业，我一直在尝试让Jquery将我的JSON文件附加到网页上，以便它像列表一样显示JSON中的对象，但我得到的只是控制台中的“对象”，我得到了完整的json作为数组，如果我使用警报而不是控制台日志，则会得到对象

我为.append和jappend尝试了一些jquery方法，我知道我们需要使用Jquery只是不确定该怎么做，还尝试了ajax。我尝试将json文件分配给const变量，然后附加该变量，但只得到一个对象，我想要的是该对象的键和值的列表

json文件



 [
    {      "category": "fruit",         
            "item": "apples",         
            "type": "Honey Crisp",         
            "brand": "Little cuties",         
            "qty": 10     
    }, 

    {   "category": "beverage",         
        "item": "milk", 
        "type": "2%",         
        "brand": "generic",         
        "qty": "1 gallon"     
    },   

    {   "category": "pasta",         
        "item": "Pasta",        
         "type": "Penne",         
         "brand": "Barilla",         
         "qty": 3     
    },   

 {  "category": "dessert",         
    "item": "Gelatin dessert",         
    "type": "Green",         
    "brand": "Jello",         
    "qty": 3     
},     

    {         
        "category": "dairy",         
        "item": "Yogurt",         
        "type": "Assorted flavors",         
        "brand": "Chobani",         
        "qty": 12     
        },

        {         
            "category": "pasta",         
            "item": "Pasta",         
            "type": "Linguini",         
            "brand": "Barilla",         
            "qty": 3     
            },     
        {         
            "category": "beverage",         
            "item": "Apple juice",         
            "type": "regular",         
            "brand": "Happy Farms",         
            "qty": 2     
            }, 

            {         
                "category": "beverage",         
                "item": "Vodka",         
                "type": "Tangerine",         
                "brand": "Grey Goose",
                "qty": 1
            }
]

基本代码

<!DOCTYPE html>
<html>
<head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<title>Coding Project</title>

</head>

<body>


<script>



$.getJSON("groceries.json", function(json) {
    console.log(json); 
    alert(json);
});

fetch.onload = function() {
    if(this.status == 200 ) {
        var groceries = JSON.parse(this.responseText);
        var output = '';
        for (var i=0, l=groceries.elements.length; i<l ; i++) {
            output += `
                <div>
                    <p>Name : ${groceries.elements[i].brand}</p>
                    <p>Symbol : ${groceries.elements[i].item}</p>
                    <p>Number : ${groceries.elements[i].qty}</p>
                    <p>Number : ${groceries.elements[i].category}</p>
                    <p>Number : ${groceries.elements[i].type}</p>
                </div> 
            `; 
        }
        $('.data').html(output);
    }
}






</script>

</body>

</html>

我能够在控制台中获取json数组，但我希望将其附加到网页上，但是到目前为止，我只是将“ object object object”附加到网页上

Answer 1

您的对象具有内部json，因此您需要在第二级循环。像这样：

let myJson = [
            {
                category: "fruit",
                item: "apples",
                type: "Honey Crisp",
                brand: "Little cuties",
                qty: 10
            },

            {
                category: "beverage",
                item: "milk",
                type: "2%",
                brand: "generic",
                qty: "1 gallon"
            },

            {
                category: "pasta",
                item: "Pasta",
                type: "Penne",
                brand: "Barilla",
                qty: 3
            },

            {
                category: "dessert",
                item: "Gelatin dessert",
                type: "Green",
                brand: "Jello",
                qty: 3
            },

            {
                category: "dairy",
                item: "Yogurt",
                type: "Assorted flavors",
                brand: "Chobani",
                qty: 12
            },

            {
                category: "pasta",
                item: "Pasta",
                type: "Linguini",
                brand: "Barilla",
                qty: 3
            },
            {
                category: "beverage",
                item: "Apple juice",
                type: "regular",
                brand: "Happy Farms",
                qty: 2
            },

            {
                category: "beverage",
                item: "Vodka",
                type: "Tangerine",
                brand: "Grey Goose",
                qty: 1
            }
        ];

        $.each(myJson, function(i, item){
            let paragraph = $("<p>"),
                imgSrc = '';

            switch(item.category) {
                case 'fruit':
                    imgSrc = 'https://www.iheartnaptime.net/wp-content/uploads/2017/04/honey-lime-fruit-salad-i-heart-naptime-3-200x200.jpg';
                    break;
                case 'beverage':
                    imgSrc = 'https://tiimg.tistatic.com/categoryimg/v1/1/beverages-399.jpg';
                    break;
                case 'pasta':
                    imgSrc = 'https://danzadefogones.com/wp-content/uploads/2020/03/Pasta-con-Ajo-y-Aceite.jpg';
                    break;
                case 'dairy':
                    imgSrc = 'https://paleoleap.com/wp-content/uploads/2010/07/dairy2-s.jpg';
                    break;
            }

            paragraph.append('<img src="'+ imgSrc +'" width="100"><br/>');

            $.each(item, function(j, property) {
                paragraph.append('<b>' + j + ':</b> ' + property + '<br />')
            });

            $("body").append(paragraph)
        });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

遍历下面的JSON数组并显示每个项目

1 个答案: