TravelWhere TravelWhere - 3 months ago 10
HTML Question

How to iterate json with javascript?

I want to get data from a json string. I want to get data from element name: url, width and height. It is located inside feed > entry > media$group > media$content > I also want get element name: $t which is lcoated in feed > entry > media$group > media$title >

I want to iterate this data so I get every url,width,height and $t but I'm having trouble with my code. It doesn't seem to work so can anyone help me fix it?



var data = JSON.parse(data);
for (var i in data.feed.entry) {
document.write(data.feed.entry[i].media$group.media$content[0].url +
"|title:" + data.feed.entry[i].media$group.media$title.$t +
"|width:" + data.feed.entry[i].media$group.media$content[0].width +
"|height:" + data.feed.entry[i].media$group.media$content[0].height +
"<br />"
);
}

<script type="text/javascript" src="http://incredibleanime.com/data.json"></script>





You can use this json formatter to make it easy to read json http://codebeautify.org/jsonviewer

The final output should look like this:

http://domain.com/pic.jpg|title: pic.jpg|width: 100px|height: 100px
http://domain.com/pic2.jpg|title: pic2.jpg|width: 100px|height: 100px
http://domain.com/pic3.jpg|title: pic3.jpg|width: 100px|height: 100px

Answer

Looking at the data, you should be looping in data.feed.entry, since that's where the relevant array is located. From there you can get the fields you need. Note that media$content is a single item array, so you have to access that accordingly.

Assuming you retrieved the JSON and parsed it into a variable called data:

for (var i in data.feed.entry) {
  document.write(data.feed.entry[i].media$group.media$content[0].url + 
    "|title:" + data.feed.entry[i].media$group.media$title.$t + 
    "|width:" + data.feed.entry[i].media$group.media$content[0].width + 
    "|height:" + data.feed.entry[i].media$group.media$content[0].height +
    "<br />"
  );
}

Here's a demo with a subset of your data:

var data = {
  "version": "1.0",
  "encoding": "UTF-8",
  "feed": {
    "xmlns": "http://www.w3.org/2005/Atom",
    "xmlns$openSearch": "http://a9.com/-/spec/opensearchrss/1.0/",
    "xmlns$gphoto": "http://schemas.google.com/photos/2007",
    "xmlns$media": "http://search.yahoo.com/mrss/",
    "id": {
      "$t": "https://picasaweb.google.com/data/feed/tiny/user/104364833692688041487/albumid/6315954810753712545"
    },
    "title": {
      "$t": "[Miss Dream] Pretty Soldier Sailormoon Act 12",
      "type": "text"
    },
    "subtitle": {
      "$t": "",
      "type": "text"
    },
    "icon": {
      "$t": "https://lh3.googleusercontent.com/-5wp_peIbVd8/V6bHb-BlAaE/AAAAAAAAH-g/YlDnNjmJbrM6PkEEd9xkEC7pKpvOw1zfwCHM/s160-c/6315954810753712545"
    },
    "link": [{
      "rel": "http://schemas.google.com/g/2005#feed",
      "type": "application/atom+xml",
      "href": "https://picasaweb.google.com/data/feed/tiny/user/104364833692688041487/albumid/6315954810753712545?alt=json&authkey=Gv1sRgCOGkkZfq8v77xAE"
    }, {
      "rel": "alternate",
      "type": "text/html",
      "href": "https://picasaweb.google.com/104364833692688041487/6315954810753712545?authkey=Gv1sRgCOGkkZfq8v77xAE"
    }, {
      "rel": "http://schemas.google.com/photos/2007#slideshow",
      "type": "application/x-shockwave-flash",
      "href": "https://photos.gstatic.com/media/slideshow.swf?host=picasaweb.google.com&RGB=0x000000&feed=https://picasaweb.google.com/data/feed/tiny/user/104364833692688041487/albumid/6315954810753712545?alt%3Drss%26authkey%3DGv1sRgCOGkkZfq8v77xAE"
    }, {
      "rel": "http://schemas.google.com/photos/2007#report",
      "type": "text/html",
      "href": "https://picasaweb.google.com/lh/reportAbuse?uname=104364833692688041487&aid=6315954810753712545"
    }, {
      "rel": "self",
      "type": "application/atom+xml",
      "href": "https://picasaweb.google.com/data/feed/tiny/user/104364833692688041487/albumid/6315954810753712545?alt=json&start-index=1&max-results=1000&authkey=Gv1sRgCOGkkZfq8v77xAE&hl=en_US&imgmax=1600&kind=photo"
    }],
    "openSearch$totalResults": {
      "$t": 52
    },
    "gphoto$id": {
      "$t": "6315954810753712545"
    },
    "gphoto$name": {
      "$t": "6315954810753712545"
    },
    "gphoto$location": {
      "$t": ""
    },
    "gphoto$access": {
      "$t": "private"
    },
    "gphoto$numphotos": {
      "$t": 52
    },
    "gphoto$user": {
      "$t": "104364833692688041487"
    },
    "gphoto$nickname": {
      "$t": "Justin Flanagan"
    },
    "gphoto$allowPrints": {
      "$t": "true"
    },
    "gphoto$allowDownloads": {
      "$t": "true"
    },
    "entry": [{
      "id": {
        "$t": "https://picasaweb.google.com/data/entry/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954819875762530?alt=json"
      },
      "title": {
        "$t": "insert.jpg",
        "type": "text"
      },
      "link": [{
        "rel": "http://schemas.google.com/g/2005#feed",
        "type": "application/atom+xml",
        "href": "https://picasaweb.google.com/data/feed/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954819875762530?alt=json&urlredir=1&authkey=Gv1sRgCOGkkZfq8v77xAE"
      }, {
        "rel": "alternate",
        "type": "text/html",
        "href": "https://picasaweb.google.com/104364833692688041487/6315954810753712545?authkey=Gv1sRgCOGkkZfq8v77xAE#6315954819875762530"
      }, {
        "rel": "http://schemas.google.com/photos/2007#canonical",
        "type": "text/html",
        "href": "https://picasaweb.google.com/lh/photo/_3zJ-cYaeBhSlReMsmyYX0yjBVJj8_pt34akukxVAro"
      }, {
        "rel": "self",
        "type": "application/atom+xml",
        "href": "https://picasaweb.google.com/data/entry/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954819875762530?alt=json&authkey=Gv1sRgCOGkkZfq8v77xAE"
      }, {
        "rel": "http://schemas.google.com/photos/2007#report",
        "type": "text/html",
        "href": "https://picasaweb.google.com/lh/reportAbuse?uname=104364833692688041487&aid=6315954810753712545&iid=6315954819875762530"
      }],
      "gphoto$id": {
        "$t": "6315954819875762530"
      },
      "gphoto$albumid": {
        "$t": "6315954810753712545"
      },
      "gphoto$access": {
        "$t": "private"
      },
      "gphoto$width": {
        "$t": "768"
      },
      "gphoto$height": {
        "$t": "562"
      },
      "gphoto$size": {
        "$t": "363126"
      },
      "gphoto$commentingEnabled": {
        "$t": "true"
      },
      "gphoto$streamId": [{
        "$t": "shared_group_6315954819875762530"
      }],
      "gphoto$shapes": {
        "faces": "done"
      },
      "media$group": {
        "media$content": [{
          "url": "https://lh3.googleusercontent.com/-dHeUnheV2HQ/V6bHcgAccWI/AAAAAAAAH-g/RAhzl3LKI54I1EAM-y-x5UM1CQnleibEACHM/s1600/insert.jpg",
          "height": 562,
          "width": 768,
          "type": "image/jpeg"
        }],
        "media$description": {
          "$t": ""
        },
        "media$keywords": {},
        "media$thumbnail": [{
          "url": "https://lh3.googleusercontent.com/-dHeUnheV2HQ/V6bHcgAccWI/AAAAAAAAH-g/RAhzl3LKI54I1EAM-y-x5UM1CQnleibEACHM/s72/insert.jpg",
          "height": 53,
          "width": 72
        }, {
          "url": "https://lh3.googleusercontent.com/-dHeUnheV2HQ/V6bHcgAccWI/AAAAAAAAH-g/RAhzl3LKI54I1EAM-y-x5UM1CQnleibEACHM/s144/insert.jpg",
          "height": 106,
          "width": 144
        }, {
          "url": "https://lh3.googleusercontent.com/-dHeUnheV2HQ/V6bHcgAccWI/AAAAAAAAH-g/RAhzl3LKI54I1EAM-y-x5UM1CQnleibEACHM/s288/insert.jpg",
          "height": 211,
          "width": 288
        }],
        "media$title": {
          "$t": "insert.jpg"
        }
      },
      "gphoto$ccOverride": {
        "$t": "false"
      }
    }, {
      "id": {
        "$t": "https://picasaweb.google.com/data/entry/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954826435291362?alt=json"
      },
      "title": {
        "$t": "cover.jpg",
        "type": "text"
      },
      "link": [{
        "rel": "http://schemas.google.com/g/2005#feed",
        "type": "application/atom+xml",
        "href": "https://picasaweb.google.com/data/feed/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954826435291362?alt=json&urlredir=1&authkey=Gv1sRgCOGkkZfq8v77xAE"
      }, {
        "rel": "alternate",
        "type": "text/html",
        "href": "https://picasaweb.google.com/104364833692688041487/6315954810753712545?authkey=Gv1sRgCOGkkZfq8v77xAE#6315954826435291362"
      }, {
        "rel": "http://schemas.google.com/photos/2007#canonical",
        "type": "text/html",
        "href": "https://picasaweb.google.com/lh/photo/jT9tnc87ixX4ijRmqAmwPkyjBVJj8_pt34akukxVAro"
      }, {
        "rel": "self",
        "type": "application/atom+xml",
        "href": "https://picasaweb.google.com/data/entry/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954826435291362?alt=json&authkey=Gv1sRgCOGkkZfq8v77xAE"
      }, {
        "rel": "http://schemas.google.com/photos/2007#report",
        "type": "text/html",
        "href": "https://picasaweb.google.com/lh/reportAbuse?uname=104364833692688041487&aid=6315954810753712545&iid=6315954826435291362"
      }],
      "gphoto$id": {
        "$t": "6315954826435291362"
      },
      "gphoto$albumid": {
        "$t": "6315954810753712545"
      },
      "gphoto$access": {
        "$t": "private"
      },
      "gphoto$width": {
        "$t": "768"
      },
      "gphoto$height": {
        "$t": "357"
      },
      "gphoto$size": {
        "$t": "331017"
      },
      "gphoto$commentingEnabled": {
        "$t": "true"
      },
      "gphoto$streamId": [{
        "$t": "shared_group_6315954826435291362"
      }],
      "gphoto$shapes": {
        "faces": "done"
      },
      "media$group": {
        "media$content": [{
          "url": "https://lh3.googleusercontent.com/-SF3JCEuFJCA/V6bHc4cW6OI/AAAAAAAAH-g/ZJffy8T1boopf6yL3RrBvlup_5SZxPT_gCHM/s1600/cover.jpg",
          "height": 357,
          "width": 768,
          "type": "image/jpeg"
        }],
        "media$description": {
          "$t": ""
        },
        "media$keywords": {},
        "media$thumbnail": [{
          "url": "https://lh3.googleusercontent.com/-SF3JCEuFJCA/V6bHc4cW6OI/AAAAAAAAH-g/ZJffy8T1boopf6yL3RrBvlup_5SZxPT_gCHM/s72/cover.jpg",
          "height": 34,
          "width": 72
        }, {
          "url": "https://lh3.googleusercontent.com/-SF3JCEuFJCA/V6bHc4cW6OI/AAAAAAAAH-g/ZJffy8T1boopf6yL3RrBvlup_5SZxPT_gCHM/s144/cover.jpg",
          "height": 67,
          "width": 144
        }, {
          "url": "https://lh3.googleusercontent.com/-SF3JCEuFJCA/V6bHc4cW6OI/AAAAAAAAH-g/ZJffy8T1boopf6yL3RrBvlup_5SZxPT_gCHM/s288/cover.jpg",
          "height": 134,
          "width": 288
        }],
        "media$title": {
          "$t": "cover.jpg"
        }
      },
      "gphoto$ccOverride": {
        "$t": "false"
      }
    }, {
      "id": {
        "$t": "https://picasaweb.google.com/data/entry/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954833364999698?alt=json"
      },
      "title": {
        "$t": "001.jpg",
        "type": "text"
      },
      "link": [{
        "rel": "http://schemas.google.com/g/2005#feed",
        "type": "application/atom+xml",
        "href": "https://picasaweb.google.com/data/feed/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954833364999698?alt=json&urlredir=1&authkey=Gv1sRgCOGkkZfq8v77xAE"
      }, {
        "rel": "alternate",
        "type": "text/html",
        "href": "https://picasaweb.google.com/104364833692688041487/6315954810753712545?authkey=Gv1sRgCOGkkZfq8v77xAE#6315954833364999698"
      }, {
        "rel": "http://schemas.google.com/photos/2007#canonical",
        "type": "text/html",
        "href": "https://picasaweb.google.com/lh/photo/G8SXbZkGZBnesi3VAFvft0yjBVJj8_pt34akukxVAro"
      }, {
        "rel": "self",
        "type": "application/atom+xml",
        "href": "https://picasaweb.google.com/data/entry/tiny/user/104364833692688041487/albumid/6315954810753712545/photoid/6315954833364999698?alt=json&authkey=Gv1sRgCOGkkZfq8v77xAE"
      }, {
        "rel": "http://schemas.google.com/photos/2007#report",
        "type": "text/html",
        "href": "https://picasaweb.google.com/lh/reportAbuse?uname=104364833692688041487&aid=6315954810753712545&iid=6315954833364999698"
      }],
      "gphoto$id": {
        "$t": "6315954833364999698"
      },
      "gphoto$albumid": {
        "$t": "6315954810753712545"
      },
      "gphoto$access": {
        "$t": "private"
      },
      "gphoto$width": {
        "$t": "768"
      },
      "gphoto$height": {
        "$t": "1186"
      },
      "gphoto$size": {
        "$t": "962091"
      },
      "gphoto$commentingEnabled": {
        "$t": "true"
      },
      "gphoto$streamId": [{
        "$t": "shared_group_6315954833364999698"
      }],
      "gphoto$shapes": {
        "faces": "done"
      },
      "media$group": {
        "media$content": [{
          "url": "https://lh3.googleusercontent.com/-ww5o_LPCLFA/V6bHdSQh3hI/AAAAAAAAH-g/Z3hxC1GJozQl64VnJFm4I3aqc4DPIpnwQCHM/s1600/001.jpg",
          "height": 1186,
          "width": 768,
          "type": "image/jpeg"
        }],
        "media$description": {
          "$t": ""
        },
        "media$keywords": {},
        "media$thumbnail": [{
          "url": "https://lh3.googleusercontent.com/-ww5o_LPCLFA/V6bHdSQh3hI/AAAAAAAAH-g/Z3hxC1GJozQl64VnJFm4I3aqc4DPIpnwQCHM/s72/001.jpg",
          "height": 72,
          "width": 47
        }, {
          "url": "https://lh3.googleusercontent.com/-ww5o_LPCLFA/V6bHdSQh3hI/AAAAAAAAH-g/Z3hxC1GJozQl64VnJFm4I3aqc4DPIpnwQCHM/s144/001.jpg",
          "height": 144,
          "width": 94
        }, {
          "url": "https://lh3.googleusercontent.com/-ww5o_LPCLFA/V6bHdSQh3hI/AAAAAAAAH-g/Z3hxC1GJozQl64VnJFm4I3aqc4DPIpnwQCHM/s288/001.jpg",
          "height": 288,
          "width": 187
        }],
        "media$title": {
          "$t": "001.jpg"
        }
      },
      "gphoto$ccOverride": {
        "$t": "false"
      }
    }]
  }
};

for (var i in data.feed.entry) {
  document.write(data.feed.entry[i].media$group.media$content[0].url + 
    "|title:" + data.feed.entry[i].media$group.media$title.$t + 
    "|width:" + data.feed.entry[i].media$group.media$content[0].width + 
    "|height:" + data.feed.entry[i].media$group.media$content[0].height +
    "<br />"
  );
}