CODEWITHSUNDEEP
javascriptjson
krishna bhargavi
krishna bhargavi

Reputation: 977

How to display images using Javascript and JSON

I have to display images to the browser and I want to get the image from a JSON response and display it to the browser using Javascript. This is what the JSON response looks like:

[{
    "0":"101",
    "member_id":"101",
    "1":"3k.png",
    "image_nm":"3k.png",
    "2":"\/images\/phones\/",
    "image_path":"\/images\/"
},{
    "0":"102",
    "member_id":"102",
    "1":"mirchi.png",
    "image_nm":"mirchi.png",
    "2":"images\/phones\/",
    "image_path":"images\/phones\/"
},{
    "0":"103",
    "member_id":"103",
    "1":"masti.png",
    "image_nm":"masti.png",
    "2":"images\/phones\/",
    "image_path":"images\/phones\/"
}]

How do I do this (I am a beginner)?

here is the code what i wrote...

       var jsonString =   '[{"0":"101","member_id":"101","1":"3k.png","image_nm":"3k.png","2":"\/images\/phones\/","image_path":"\/images\/phones\/"},{"0":"102","member_id":"102","1":"mirchi.png","image_nm":"mirchi.png","2":"images\/phones\/","image_path":"images\/phones\/"},{"0":"103","member_id":"103","1":"masti.png","image_nm":"masti.png","2":"images\/phones\/","image_path":"images\/phones\/"}]';
       var obj = JSON.parse(jsonString);

       for(var i = 0, len = obj.length; i < len; i++){
       var img = new Image();
       img.setAttribute("src",obj[i][2] + obj[i][1]);
       document.body.appendChild(img);
         }

Upvotes: 2

Views: 26189

Answers (3)

Ishan Patel
Ishan Patel

Reputation: 6091

You can use jQuery here.

Add following script in the head tag.

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

<script>
$(document).ready(function () {
var url = "entries.json";
$.getJSON(url, function (url){
 var img= "";
$.each(url, function () {
 img += '<li><img src= "' + this.images+ '"></li>';
});
$('body').append(img);
});
});
</script>

Upvotes: 0

Ohgodwhy
Ohgodwhy

Reputation: 50798

Seems pretty straight forward. If this is json_encoded, then we can use json[key] to get the value, if you aren't familiar with the term 'key', json encodes arrays in the key:value, format, so for this, if we used json[member_id], we would get '101', if we used json[image_nm], we would get '3k.png', putting this all together it seems as if it's pretty well separated, you just have to know what goes where. I have an idea, but not 100%,I would expect you to do something like

var myImages = '';
for(var i = 0; i < json.length; i++){
  myImages += '<img src="'+json[i]['image_path']+json[i]['img_nm']+'" />';
}
document.getElementById('myImgHolder').innerHTML = myImages;

Based on your json data, this would evaluate a variable and test it against the length of the json array. The statement also declares that while the variable is less than the total length of the json array, we will iterate to the next object. We would expect output along the format of -

<img src="/images/3k.png" />.

Then it would take the new images and place them in a Div with the id of myImgHolder.

Hope this helps.

EDIT 1

If you don't have a container to place these images inside of it, then you will need to create the container and place it somewhere.

var myImgHolder = document.createElement('div');
myImgHolder.setAttribute("id", "myImgHolder");
document.getElementById('ICanTargetThis').appendChild(myImgHolder);

The above code sets the variable myImgHolder to the creation of a new DIV element. Then, using the variable, we declare the attribute "id" to set as 'myImgHolder'. Now we have the element. But what do we do with it? Well we MUST target an existing element within our page, even if we're just targeting the tag...something. then we use the .appendChild method and use our variable...appendChild(myImgHolder);

Upvotes: 0

Sirko
Sirko

Reputation: 74086

Assuming you parsed your json in a variable called json, this would add all images in a container with id yourcontainer:

var images = '';
for( var i=0, max<json.length; ++i ) {
  images += '<img src="' + json[i]['image_path'] + json[i]['image_nm'] + '" />';
}

document.getElementById( 'yourcontainer' ).innerHTML = images;

Upvotes: 7

Related Questions