Retrieving values from JSON with jQuery

Question

I have been using this JSON

{ 
    "firstName": "John",
    "lastName": "Doe",
    "age": 25,
    "info": { 
        "email": "[email protected]",
        "url": "http://"
    }
}

With this jQuery function

<script>
    $(document).ready(function() {
        $("button").click(function() {
            $.getJSON("demo_ajax_json.js", function(result) {
                $.each(result, function(i, field) {
                    $("div").append(field + " ");
                });
            });
        });
    });
</script>

I want to extract the values of email and url from above given JSON. Can anybody help me in this regard.

Thank you

possible duplicate of jquery json parsing

Matteo
– Matteo

2012-11-02 14:28:47 +00:00
Commented Nov 2, 2012 at 14:28 — Matteo
– Matteo, Commented Nov 2, 2012 at 14:28

Tom Hubbard · Accepted Answer · 2012-11-02 11:39:46Z

3

No need to do it in an each call.

<script>
    $(document).ready(function() {
        $("button").click(function() {
            $.getJSON("demo_ajax_json.js", function(result) {
                $("div").append(result.info.email + " " + result.info.url);
              );
            });
        });
    });
</script>

Note that by selecting "div" you will be appending the info into ALL divs on the page.

edited Nov 2, 2012 at 11:39

answered Nov 2, 2012 at 11:32

Tom Hubbard

16.2k14 gold badges62 silver badges87 bronze badges

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

2 Comments

h_h Over a year ago

i need to use each as the json file may contains data for more than one person

Tom Hubbard Over a year ago

@h_a86 I see. You may want to update your JSON example then as the structure would have an impact on the proper answer. In general terms your original solution just needs to go one reference deeper (i.e. field.info.email rather than just field.)

Rory McCrossan · Accepted Answer · 2012-11-02 11:40:27Z

2

Replace this:

$.each(result, function(i, field) {
    $("div").append(field + " ");
});

With this:

$("div").append(result.field.info.email);
$("div").append(result.field.info.url);

You don't need the each as you're only returning one set of data and are trying to access it's properties directly.

edited Nov 2, 2012 at 11:40

answered Nov 2, 2012 at 11:29

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

1 Comment

Tom Hubbard Over a year ago

Without the each call you will need to reference it as result.field.info.email etc., no?

Ram Singh · Accepted Answer · 2012-11-02 11:58:46Z

0

try the following code:

<script>
$(document).ready(function() {
    $("button").click(function() {
        $.getJSON("demo_ajax_json.js", function(data) {
            var Append = "";
              for (var i = 0; i < data.d.length; i++) {
              Append +=title="' + data.d[i].FriendName + '";
              }
            $("div").append(Append);
          );
        });
    });
});

answered Nov 2, 2012 at 11:58

Ram Singh

6,97235 gold badges107 silver badges172 bronze badges

Collectives™ on Stack Overflow

Retrieving values from JSON with jQuery

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related