How to read a JSON file to render HTML list

Question

How to read a JSON file to render HTML list

Asked 6 years ago

Viewed 325 times

7

I am having a difficulty in an application that reads a json file and renders in HTML, I am not able to access the object correctly, the variable products is as Undefined. Could someone help me? if there’s any other way to solve it I’m open too

html

<div id="main__interess__list"></div> // a lista vai nessa div

js

$.getJSON("./products.json", function (data) {

 //alert("Carregou o list.json");
 var products = data.recommendation;
 var tempHtml = '<ul>';

for (var i = 0; i < products.length; i++) {
  var product = products[i];
  tempHtml += "<li><p>" + product.name + "</p><ul>";
  tempHtml += "</ul></li>";

}
tempHtml += "</ul>";

$('#main__interess__list').html(tempHtml);
});

json file

[{
    "data": {
        "widget": {
            "size": 10
        },
        "item": {
            "businessId": "7990220",
            "name": "iPhone SE Apple com 16GB, Tela 4”, iOS 9, Sensor de Impressão Digital, Câmera iSight 12MP, Wi-Fi, 3G/4G, GPS, MP3, Bluetooth e NFC - Cinza Espacial",
            "imageName": "//www.itelios.com.br/arquivos/imagens/iPhone-SE-Apple-com-16GB-Tela-4-iOS-9-Sensor-de-Impressao-Digital-Camera-iSight-12MP-Wi-Fi-3G-4G-GPS-MP3-Bluetooth-e-NFC-Cinza-Espacial-7990220.jpg",
            "price": "R$ 1.999,00",
            "oldPrice": "R$ 2.599,00",
            "productInfo": {
                "paymentConditions": "ou até 9x de R$ 222,11 sem juros"
            }
        },
        "recommendation": [{
                "businessId": "4453613",
                "name": "MacBook Pro Apple MF839BZ/A com Intel® Core™ i5 Dual Core, 8GB, 128GB SSD, Leitor de Cartões, HDMI, Wireless, Webcam, LED Retina 13.3” e OS X Yosemite",
                "imageName": "//www.itelios.com.br/arquivos/imagens/MacBook-Pro-Apple-MF839BZ-A-com-Intel-Core-i5-Dual-Core-8GB-128GB-SSD-Leitor-de-Cartoes-HDMI-Wireless-Webcam-LED-Retina-13-3-e-OS-X-Yosemite-4453613.jpg",
                "price": "R$ 6.999,00",
                "oldPrice": "R$ 7.999,00",
                "productInfo": {
                    "paymentConditions": "ou até 9x de R$ 777,67 sem juros"
                }
            },
            {
                "businessId": "11549005",
                "name": "Apple Macbook Air 13 I5 1,6ghz 8gb 128gb Ssd Mmgf2",
                "imageName": "//www.itelios.com.br/arquivos/imagens/apple-macbook-air-13-i5-16ghz-8gb-128gb-ssd-mmgf2-11549005.jpg",
                "price": "R$ 5.999,00",
                "oldPrice": null,
                "productInfo": {
                    "paymentConditions": "ou até 9x de R$ 666,56 sem juros"
                }
            },
            {
                "businessId": "4996363",
                "name": "MacBook Pro Apple MJLQ2BZ/A com Intel® Core™ i7 Quad Core, 16GB, 256GB SSD, Leitor de Cartões, HDMI, Bluetooth, Tela LED Retina 15.4” e OS X Yosemite",
                "imageName": "//www.itelios.com.br/arquivos/imagens/MacBook-Pro-Apple-MJLQ2BZ-A-com-Intel-Core-i7-Quad-Core-16GB-256GB-SSD-Leitor-de-Cartoes-HDMI-Bluetooth-Tela-LED-Retina-15-4-e-OS-X-Yosemite-4996363.jpg",
                "price": "R$ 11.990,00",
                "oldPrice": "R$ 11.500,00",
                "productInfo": {
                    "paymentConditions": "ou até 9x de R$ 1.277,78 sem juros"
                }
            },
            {
                "businessId": "11514560",
                "name": "Apple Macbook Air 13 Core I5 1.6ghz 8gb 128gb Ssd - Mmgf2",
                "imageName": "//www.itelios.com.br/arquivos/imagens/apple-macbook-air-13-core-i5-16ghz-8gb-128gb-ssd-mmgf2-11514560.jpg",
                "price": "R$ 4.699,99",
                "oldPrice": null,
                "productInfo": {
                    "paymentConditions": "ou até 9x de R$ 522,22 sem juros"
                }
            },
            {
                "businessId": "1765938",
                "name": "Mac Mini Apple MGEN2BZ/A com Intel® Core™ i5 Dual Core, 8GB, 1TB, Leitor de Cartões, HDMI, Wireless AC, Bluetooth 4.0 e OS X Yosemite",
                "imageName": "//www.itelios.com.br/arquivos/imagens/Mac-Mini-Apple-MGEN2BZ-A-com-Intel-Core-i5-Dual-Core-8GB-1TB-Leitor-de-Cartoes-HDMI-Wireless-AC-Bluetooth-4-0-e-OS-X-Yosemite-3865616.jpg",
                "price": "R$ 5.823,90",
                "oldPrice": null,
                "productInfo": {
                    "paymentConditions": "ou até 8x de R$ 727,99 sem juros"
                }
            },
            {
                "businessId": "6823995",
                "name": "iMac Apple MK142BZ/A com Intel® Core™ i5 Dual Core, 8GB, 1TB, Leitor de Cartões, Wireless, Bluetooth, Webcam, LED",
                "imageName": "//www.itelios.com.br/arquivos/imagens/iMac-Apple-MK142BZ-A-com-Intel-Core-i5-Dual-Core-8GB-1TB-Leitor-de-Cartoes-Wireless-Bluetooth-Webcam-LED-21-5-e-OS-X-El-Capitan-6823995.jpg",
                "price": "R$ 5.999,00",
                "oldPrice": null,
                "productInfo": {
                    "paymentConditions": "ou até 9x de R$ 666,56 sem juros"
                }
            },
            {
                "businessId": "10404692",
                "name": "iPhone 6s Apple com Tela 4,7” HD, 32GB, 3D Touch, iOS 9, Sensor Touch ID, Câmera iSight 12MP, Wi-Fi, 4G, GPS, Bluetooth e NFC - Cinza Espacial",
                "imageName": "//www.itelios.com.br/arquivos/imagens/iphone-6s-apple-com-tela-47-hd-32gb-3d-touch-ios-9-sensor-touch-id-camera-isight-12mp-wi-fi-4g-gps-bluetooth-e-nfc-cinza-espacial-10404692.jpg",
                "price": "R$ 2.639,12",
                "oldPrice": "R$ 3.298,90",
                "productInfo": {
                    "paymentConditions": "ou até 12x de R$ 219,93 sem juros"
                }
            },
            {
                "businessId": "11466328",
                "name": "iPhone 7 Apple Plus Red com 128GB, Tela Retina HD de 5,5”, iOS 10, Dupla Câmera Traseira, Resistente à Água, Wi-Fi, 4G LTE e NFC - Vermelho",
                "imageName": "//www.itelios.com.br/arquivos/imagens/iphone-7-apple-plus-red-com-128gb-tela-retina-hd-de-55-ios-10-dupla-camera-traseira-resistente-a-agua-wi-fi-4g-lte-e-nfc-vermelho-11466328.jpg",
                "price": "R$ 4.499,00",
                "oldPrice": null,
                "productInfo": {
                    "paymentConditions": "ou até 10x de R$ 449,90 sem juros"
                }
            },
            {
                "businessId": "10404669",
                "name": "iPhone 6s Apple com Tela 4,7” HD, 32GB, 3D Touch, iOS 9, Sensor Touch ID, Câmera iSight 12MP, Wi-Fi, 4G, GPS, Bluetooth e NFC - Ouro Rosa",
                "imageName": "//www.itelios.com.br/arquivos/imagens/iphone-6s-apple-com-tela-47-hd-32gb-3d-touch-ios-9-sensor-touch-id-camera-isight-12mp-wi-fi-4g-gps-bluetooth-e-nfc-ouro-rosa-10404669.jpg",
                "price": "R$ 2.639,12",
                "oldPrice": "R$ 2.999,00",
                "productInfo": {
                    "paymentConditions": "ou até 12x de R$ 219,93 sem juros"
                }
            },
            {
                "businessId": "7990220",
                "name": "iPhone SE Apple com 16GB, Tela 4”, iOS 9, Sensor de Impressão Digital, Câmera iSight 12MP, Wi-Fi, 3G/4G, GPS, MP3, Bluetooth e NFC - Cinza Espacial",
                "imageName": "//www.itelios.com.br/arquivos/imagens/iPhone-SE-Apple-com-16GB-Tela-4-iOS-9-Sensor-de-Impressao-Digital-Camera-iSight-12MP-Wi-Fi-3G-4G-GPS-MP3-Bluetooth-e-NFC-Cinza-Espacial-7990220.jpg",
                "price": "R$ 1.999,00",
                "oldPrice": "R$ 2.599,00",
                "productInfo": {
                    "paymentConditions": "ou até 9x de R$ 222,11 sem juros"
                }
            }
        ]
    }
}]

4

Shouldn’t be var products = date[0].data.Recommendation since your JSON is an array?

– Andre

2018/11/14 at 02:32
2

It was that same, simpler than I imagined, I am beginner in the area, so sometimes these details go unnoticed! Thank you very much

– Natacha Romano

2018/11/14 at 03:00

1 answer

Browser other questions tagged javascript html jquery ajax json

You are not signed in. Login or sign up in order to post.

by greguintow • **151** points · Answer 1 · 2019-03-31T12:02:07+00:00

I believe you are accessing the wrong way recomendation you notice that you have created a json file which is an array think the correct way to get the recomendation would be so:

var products = data[0].data.recommendation