Consuming JSON data in Javascript

Asked

Viewed 36 times

0

I need some help with javascript. I’m trying to show in my index.html the data I’m consuming from a json. But when opening the index and waiting for the document to be loaded the items comes with Undefined.

$(document).ready(function () {
    var products = "";
    var url = "https://api.myjson.com/bins/10p600";

    $.ajax({
        url: url,    
        dataType: "json",
        success: function (response) {
            if(response[0].erro) {
                $("h2").html(response[0].erro);
            }else {
                for(var i = 0; i < response.length; i++) {
                    products += "<div>";
                    products += "<div>" + response[i].imageName + "</div>";
                    products += "<h4>" + response[i].name + "</h4>";
                    products += "<p>" + response[i].price + "</p>";
                    products += "<p>" + response[i].paymentConditions + "</p>";    
                    products += "</div>";               
                }
                
                $("#myproducts").html(products);
            }
        }
    });
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Teste Front-End</title>
</head>
<body>
    <div id="myproducts"></div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="teste.js"></script>
</body>
</html>

javascript json

  • When so remember to post the source JSON, questions should not depend on external links. Links to better understand how Sopt works: [Tour], [Ask], Manual on how NOT to ask questions and [Help].

1 answer

2

You are accessing keys that do not exist in JSON, which is why you receive Undefined.

The structure of JSON is:

[
    data: {
        item: {...},
        recommendation: [{...}, {...}, {...}, ...],
        widget: {
            size: 10
        }
    }
]

What you want to access in your code is response[i].data.item.imageName, response[i].data.item.name, response[i].data.item.price and response[i].data.item.productInfo.paymentConditions

Edit

Or if you are trying to access the recommendations would response[0].data.recommendation[i].imageName, response[0].data.recommendation[i].name, etc.

  • But I want to access the data of the Recommendation, to show all in the index

  • 1

    Try this: Sponse[0]['data']. item['imageName']

  • 1

    And for the recommendation: Answer[0]['data']['Commendation']

  • Yes I made the change here, but now only appears the first of the Recommendation, as I do to show all ?

  • State the case as for(var i = 0; i < response[0].data.recommendation.length; i++)

  • I’m having trouble rendering the image of the products, I’m called so in js

  • products += "<img" + Response[0].data.Recommendation[i]. imageName + ">";

  • @Albertomasculinoborguesani actually, you are adding the address as if it were an element attribute <img>. But to put the image address, you need to do it in the attribute src. So instead of concatenating the strings, you could do so: \<img src="${Response[0].data.Recommendation[i]. imageName}" />``.

Show 3 more comments

Browser other questions tagged javascript json

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