Display JSON data from url using ajax

Question

We want to display all the names from our json file into a div using javascript. We tried a lot of things, but we didn't manage to succeed.

json data : http://www.smartbustracking.be/json/data.json

This is what we tried :

<button>get data</button>
<div id="resultJson"></div>


<script type="text/javascript" language="javascript">
             $("button").click(function(){
                    $.getJSON("http://www.smartbustracking.be/json/data.json", function(result){
                        for(var x = 0; x < result.length; x++){

                                $.each(result, function(i, field) {
                                    $("#resultJson").append(field[x].name);
                                }

                        }
                    });
            });

If anyone can help us with this ploblem, that would be great

Thanks in advance !

Please add any available output written to the screen / log files. — PJTraill
– PJTraill, Commented Jun 13, 2015 at 11:55

Anik Islam Abhi · Accepted Answer · 2015-06-14 14:09:50Z

3

don't use extra loop inside for loop to extract name.

Your data is like

[0] = {name:"name1"}
[1] = { name: "name2"}

If there is a array inside [0] and you want to extract value from that then you need another loop inside for loop to extract that value like you wanna to pull value of bushaltes.

Try like this

$("button").click(function() {
    $.getJSON("http://www.smartbustracking.be/json/data.json", function(result) {
        console.log(result);
        for (var x = 0; x < result.length; x++) {
            $("#resultJson").append(result[x].name);
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>get data</button>
<div id="resultJson"></div>

edited Jun 14, 2015 at 14:09

answered Jun 13, 2015 at 11:47

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KimberlyGS Over a year ago

Thank you so much for helping us so quickly. It works now

nalinc · Accepted Answer · 2015-06-13 11:52:31Z

1

you need either the for loop or $.each but not both.

Here's the updated code.

 $("button").click(function(){
        $.getJSON("http://www.smartbustracking.be/json/data.json", function(result){
            $.each(result, function(i, field) {
                $("#resultJson").append(field.name);
            });
        });
   });

and here's the demo

answered Jun 13, 2015 at 11:52

nalinc

7,43327 silver badges34 bronze badges

Comments

Adib Aroui · Accepted Answer · 2015-06-13 11:51:08Z

0

I don't see why you are using jQuery each inside your for loop.

Additionnaly, I think you should use result[x].name instead of field[x].name as you are giving result as parameter of callback function:

$.getJSON("http://www.smartbustracking.be/json/data.json", function(result){
                        for(var x = 0; x < result.length; x++){
                                    $("#resultJson").append(result[x].name);
                        }
                    });

I hope it helps

answered Jun 13, 2015 at 11:51

Adib Aroui

5,0656 gold badges45 silver badges95 bronze badges

Collectives™ on Stack Overflow

Display JSON data from url using ajax

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related