如何在HTML中使用jquery或JS通过json获取图像

时间:2015-07-16 09:19:49

标签: javascript jquery html json

任何身体都可以帮助,我在Json中是全新的我想要获取图像但是在数组和对象中有点混淆。或者是否可以在没有img标签的情况下获取图像。提前谢谢

This is my JSON link

这就是我的尝试:

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

帮助我取得&#34;排名&#34;仅

{ "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"
         }, 

    ]
}

3 个答案:

答案 0 :(得分:1)

首先,您将使用XMLHttpRequest从此页面获取json内容的内容

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

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

答案 1 :(得分:0)

您可以使用.filter()获取image数组。

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

答案 2 :(得分:0)

你可以按照以下方式使用jquery

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

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