Цикл по приведенному ниже массиву JSON и отображение каждого элемента

ProgramBox

Цикл по приведенному ниже массиву JSON и отображение каждого элемента

Post author:admin
Запись опубликована:24 марта, 2023
Post category:Вопросы по программированию

#javascript #jquery #json

Вопрос:

У меня есть домашнее задание, и я пытался заставить Jquery добавить мой файл JSON на веб-страницу, чтобы он отображал объекты в формате JSON в виде списка, но все, что я получаю, это «object» в моей консоли. Я получаю полный json в виде массива, и если я использую alert, а не console log, я получаю object

Я попробовал несколько методов jquery для каждого и .append, я знаю, что нам нужно использовать Jquery, но не уверен, каким способом, также попробовал ajax. Я попытался присвоить файлу json постоянную переменную, а затем добавить ее, но только что получил объект, я хочу, чтобы это был список ключа и значения объекта

файл 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», добавляющийся к веб-странице

Ответ №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>

1. Эй, большое спасибо за это, у меня есть продолжение, я хочу сделать так, чтобы каждая «категория» в json также открывала изображение, его дополнительный кредит. итак, как если бы рядом с категорией fruit открывалось изображение рядом с ним или под ним, можете ли вы указать мне правильное направление?

2. Готово, взгляните на код еще раз. Я использовал изображения с сайтов, которые я нашел в Интернете. Вы должны хранить свои собственные изображения в папке внутри вашего проекта

3. большое спасибо, извините, если я задал вопрос супер новичка, я действительно пытаюсь учиться. Я очень благодарен, что вы не сделали мне замечания, но на самом деле помогли мне, если у вас есть какие-либо дополнительные материалы, которые, по вашему мнению, помогли вам изучить это, которые, по вашему мнению, могли бы помочь, я открыт для этого, но я очень благодарен вам за помощь