2

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);
         }
Improve this question
3
  • And what concrete output do you expect in your example? Commented Mar 7, 2012 at 7:54
  • i ecpect all images should display on the browser Commented Mar 7, 2012 at 8:37
  • of course, but please add an exact html code result which do you expect from the code sample you pasted here. Commented Mar 7, 2012 at 8:42

3 Answers 3

Reset to default
7

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;
Improve this answer
Sign up to request clarification or add additional context in comments.

14 Comments

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);
yeah i replaced and i wrote the code like this but images are not displayed on the browser..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); }
you would have to paste your whole code (maybe using pastebin.com ), so i can see, what's wrong. possibly you have no container div?
@krishnabhargavi I put your code at jsfiddle.net/KdMwe and it works, when replacing your image urls, with something other. So I think you should double-check your image paths to make sure the images are actually where your page searches for them.
the path of the images is correct..the images of the phones displayed on the browser???
|
0

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);

Improve this answer

2 Comments

a <div id="myImgHolder"> where all the iamges that we have created are then placed into.
that is the html code...but i need to write all these stuff in javascript
0

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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.