Deepak Bandi Deepak Bandi - 17 days ago 6
Javascript Question

How do I get the data values just using JAVASCRIPT

How do I get the data values with just Javascript without using eval?

jsonFlickrFeed({
"title": "Recent Uploads tagged punctuation and atsign",
"link": "http:\/\/www.flickr.com\/photos\/",
"description": "",
"modified": "2014-01-09T15:40:57Z",
"generator": "http:\/\/www.flickr.com",
"items": [
{
.....
.....

Answer

Basically can someone tell me how to parse the data from this url? http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json

You're not meant to parse that. That's an old-school JSONP response. One way or another, it has to be evaluated. JSONP is historically used to do CORS (cross-origin resource sharing) where proper CORS isn't possible.

You must define jsonFlickrFeed within your program, and then

<script type="application/javascript"
        src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json">
</script>

This will cause jsonFlickrFeed to be called with the data Object.

Note: the term JSON is being misused here because jsonFlickrFeed is actually accepting a JavaScript Object; not a JSON string.

JSONP Callbacks: Normally you can configure the name of the callback by passing &callback=foo to the JSONP request. I tried this using the flickr URL you provided, but their API somehow functions differently or doesn't support a user-named callback. Check their API and see if you can specify a callback following a sensible naming convention.


Here's a fully functional demo to show you how its meant to work. We'll write out 3 pieces of the response data to the console; title, link, and modified. Obviously you can do whatever you want with the data.

<script>
  function jsonFlickrFeed (data) {
    console.log("title", data.title)
    console.log("link", data.link)
    console.log("modified", data.modified)
  }
</script>

<script type="application/javascript"
        src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json">
</script>

Here's another demo that displays the images in the items attribute

body {
  display: flex;
  flex-direction: row;
}

img {
  display: flex;
  max-height: 50px;
}
<script>
  function makeImage (src) {
    return Object.assign(document.createElement('img'), {src})
  }
  
  function jsonFlickrFeed (data) {
    for (let {media: {m}} of data.items)
      document.body.appendChild(makeImage(m))
  }
</script>

<script type="application/javascript"
        src="http://www.flickr.com/services/feeds/photos_public.gne?tags=punctuation,atsign&format=json">
</script>

In either example, note that I did not have to manually parse anything. There is no JSON here, so there is nothing to parse.