How to fetch image through json using jquery or JS in HTML

Question

Can any body help, m totally new in Json I want to fetch the image but m bit confuse in the array and object thing. Or is it possible to fetch image without img tag. Thank you in advance

This is my JSON link

this what I have tried:

function myFunction(worldpopulation) {
    var out = "";
    var i;
    for(i = 0; i<worldpopulation.length; i++)
        out += '' + worldpopulation[i].rank;
    document.getElementById("id01").innerHTML = out;
}

just help me to fetch "rank" only

{ "worldpopulation": 
    [
         {
         "rank":1,"country":"China",
         "population":"1,354,040,000",
         "flag":"http://www.androidbegin.com/tutorial/flag/china.png"
         }, 

         {
         "rank":2,"country":"India",
         "population":"1,210,193,422",
         "flag":"http://www.androidbegin.com/tutorial/flag/india.png"
         }, 

         {
         "rank":3,"country":"United States",
         "population":"315,761,000",
         "flag":"http://www.androidbegin.com/tutorial/flag/unitedstates.png"
         }, 

    ]
}

please include a small part of your JSON as example in your question, or it will become obsolete and useless to other SO users as soon as this .txt/json file gets removed from the server... It is also quite unclear to me what you're exactly trying to achieve and what are the current and expected result. — Laurent S.
– Laurent S., Commented Jul 16, 2015 at 9:46

youssef mohamed · Accepted Answer · 2015-07-16 09:38:46Z

1

The first thing you will get the content of your json content from this page using XMLHttpRequest

var request = new XMLHttpRequest();
var url = "http://www.androidbegin.com/tutorial/jsonparsetutorial.txt";
request.onreadystatechange = function() {
    if(request.readyState == && request.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
}

the implementation of myFunction

function myFunction(myArr)
{
    for(var i=0; i< myArr.length; ++i) {
        var img ; // get your element you want to place img inside
        img.src = myArr[0].flag;
    }
}

answered Jul 16, 2015 at 9:38

youssef mohamed

453 bronze badges

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

Comments

ozil · Accepted Answer · 2015-07-16 09:34:16Z

0

you can use .filter() to get image array.

var imageArr = [];
   imageArr = worldpopulation.filter(function(val,indx){
   return val.flag;
});

answered Jul 16, 2015 at 9:34

ozil

7,1639 gold badges38 silver badges61 bronze badges

Comments

Timir Maji · Accepted Answer · 2015-07-16 09:54:57Z

0

you can use jquery in following way

$.getJSON( "http://www.androidbegin.com/tutorial/jsonparsetutorial.txt",function( data ) { 

  $.each( data.worldpopulation, function( key, country) {
   console.log('Image Url',country.flag)
  });
});

answered Jul 16, 2015 at 9:54

Timir Maji

193 bronze badges

Collectives™ on Stack Overflow

How to fetch image through json using jquery or JS in HTML

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related