Get JSON attributes using Jquery

Question

This is my test.json file :

[{"id":"12","url":"http:\/\/localhost\/test\/1\/images\/pic\/3.jpg"},
{"id":"11","url":"http:\/\/localhost\/test\/1\/images\/pic\/1.png"},
{"id":"10","url":"http:\/\/localhost\/test\/1\/images\/pic\/2.png"}]

I want to print it on emphasized text using jQuery.

<div>12<img src="http://localhost/test/1/images/pic/3jpg" /></div>
<div>11<img src="http://localhost/test/1/images/pic/1jpg" /></div>
<div>10<img src="http://localhost/test/1/images/pic/2jpg" /></div>

Please, change the tittle of the question for another one which give people a best idea about what do you need. "Need help in java/c++/maven/linux/jason" doesn't give further information that the labels "java, c++, maven, linux, or jason". — Shondeslitch
– Shondeslitch, Commented Nov 24, 2015 at 23:58
I'd go with the classic formula: What did you try? What didn't work? It will be easier to answer you then. — Frederik.L
– Frederik.L, Commented Nov 25, 2015 at 0:07

Jocelyn · Accepted Answer · 2015-11-25 01:50:01Z

1

If you want to get your json from the server rather than hard-coding it into your javascript, use jquery's .getJSON() method (see docs). Then iterate over the response data using the .each() method (see docs).

$.getJSON(
    'test.json',
    function(data) {
        $.each(data, function(i, obj) {
            el = $('<div>' + obj['id'] + '<img src="'+ obj['url'] +'" /></div>');
            $('body').append(el);
        });
    }
);

edited Nov 25, 2015 at 1:50

Jocelyn

11.4k11 gold badges47 silver badges63 bronze badges

answered Nov 25, 2015 at 0:02

Vince

3,3181 gold badge20 silver badges30 bronze badges

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

Comments

Zakaria Acharki · Accepted Answer · 2015-11-24 23:56:12Z

1

Check the valid JSON bellow and try to reformat yours like it, you can find also example that show you how you can parse a JSON Object using for in to acheive the desired result.

Hope this helps.

var test_json = 
[
   {"id":"12","url":"http:\/\/localhost\/test\/1\/images\/pic\/3.jpg"},
   {"id":"11","url":"http:\/\/localhost\/test\/1\/images\/pic\/1.png"},
   {"id":"10","url":"http:\/\/localhost\/test\/1\/images\/pic\/2.png"}
];

for ( var key in test_json )
{
    console.log('<div>'+test_json[key].id+'<img src="'+test_json[key].url+'" /></div>');
}

answered Nov 24, 2015 at 23:56

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Collectives™ on Stack Overflow

Get JSON attributes using Jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related