CODEWITHSUNDEEP
javascriptjqueryjson
Joel
Joel

Reputation: 456

I just cannot make this JSON data appear

I'm still new to getting JSON data and manipulating it, be easy with me. I seem to be making a successful call to the data, but listing the fields comes back with [object] instead of the actual fields. It's probably something stupid, but I've been trying every variation that I can think of to specify the fields and it's just causing errors in the console.

You can see the JSON data here: https://api.myjson.com/bins/10h45j.json

Any idea what I'm doing wrong here?

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("https://api.myjson.com/bins/10h45j.json", function(data){
            $.each(data.Luthiers, function(i, field){
                $("#cheetos").append(field + "<br />");
            });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Get JSON data</button>

<div id="cheetos"></div>

Upvotes: -1

Views: 52

Answers (3)

Rahul Singh
Rahul Singh

Reputation: 19640

You can try some thing like this and here u guess you can fetch the individual items too .

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("https://api.myjson.com/bins/10h45j.json", function(data){
            $.each(data.Luthiers, function(i, field){
                $.each(field, function(j, subFields){
                	$("#cheetos").append(subFields + "<br />");
            });
            });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Get JSON data</button>

<div id="cheetos"></div>

Upvotes: 1

delano
delano

Reputation: 106

You can also try this:

    $(document).ready(function(){
    $("button").click(function(){
        $.getJSON("https://api.myjson.com/bins/10h45j.json", function(data){
            $.each(data.Luthiers, function(field){
                $("#cheetos").append(field + "<br />");
            });
        });
    });
});

Upvotes: 1

Emilio Venegas
Emilio Venegas

Reputation: 556

Add JSON.stringify in order to, well, "stringify" the JSON object. Try the snippet below, you'll see your data is printed the way you expect :)

$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("https://api.myjson.com/bins/10h45j.json", function(data){
            $.each(data.Luthiers, function(i, field){
                $("#cheetos").append(JSON.stringify(field) + "<br />"); // add JSON.stringify()
            });
        });
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Get JSON data</button>

<div id="cheetos"></div>

Upvotes: 2

Related Questions