Consuming an API field

[dominatrix1]

I have been given a link to public API field that I need to consume

https://api.flickr.com/services/feeds/photos_public.gne?tags=potato&tagmode=all&format=json

However I want to use some of the data and turn some of it into an object that I can use - however the data that I am getting back is not in normal JSON format so I cant use it how I would normally would.

Does anyone know how I can solve this?

 

[Craig321]

What language?

First guess is PHP, in which case does this help? https://www.flickr.com/services/api/response.php.html

 

[dominatrix1]

I want to use it in angular

 

[sb89]

Add &nojsoncallback=1 to the url.

e.g. https://api.flickr.com/services/fee...tato&tagmode=all&format=json&nojsoncallback=1

 

[dominatrix1]

So how would I get say the title out out of this object ?

 

[meandu229]

 $.ajax({
            url:  'https://api.flickr.com/services/feeds/photos_public.gne?tags=potato&tagmode=all&format=json&nojsoncallback=1',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            type: 'GET',
            success:function (response, textStatus, jqXHR) {                
                alert(response.title)
            },
            error: function (jqXHR, textStatus, errorThrown) {

            }
        });

Something like that. But you may have issues with access-control-allow-origin headers.

 

[dominatrix1]

Hmm doesnt seem to work I am getting an error - I have solved the CORS issue so thats not a problem.

What I don't understand it why the web page does not look like a normal JSON page

 

[meandu229]

What error?
https://api.flickr.com/services/fee...tato&tagmode=all&format=json&nojsoncallback=1 looks exactly like a json page to me?

 

[dominatrix1]

SyntaxError: Unexpected token '
at Object.parse (native)

I was getting a response fine with the previous but for some reason it doesnt like the jsoncallback=1..

 

[dominatrix1]

this.getPhoto = function(){
    console.log('gettinghere')
    $http
    .get('https://api.flickr.com/services/feeds/photos_public.gne?tags=potato&tagmode=all&format=json&nojsoncallback=1')
    .then(function(response){
      var photoData = response.data
      console.log(photoData)
      self.addPhoto(photoData)
    })
    // self.newPhoto = '';
  }

  self.addPhoto = function(photoData){

    var newPhotoObject = {
      title: photoData['title']
    }
    // console.log(newPhotoObject)
    self.photos.push(newPhotoObject);
    var newPho = new Photo(newPhotoObject);
    newPho.$save(function(){
      newPhotoObject = {}
    });
  }

 

[sb89]

http://jsfiddle.net/sb89/ues64dbd/

 

[dominatrix1]

hmmm for some reason not working in angular

 

[sb89]

Did you try the code in my jsfiddle?

 

[dominatrix1]

yes that works but in anguar when I try adn work with the response from the JSON I get

Cannot read property 'title' of undefined

 

[sb89]

Have you incorporated the code I had in the jsfiddle into your angular solution? If so can you post that code?

 

[iKettles]

Have you logged the response in Angular before trying to retrieve the title? Double check the JSON structure

 

[dominatrix1]

https://jsfiddle.net/rvvmdxfv/

this is ACTUALLY the correct link

 

[dominatrix1]

im logging the response in the console and I am getting the same thing but I cant access the response with the callback=1

 

[sb89]

I get the following error when running your js fiddle:

Uncaught Error: [$injector:modulerr] Failed to instantiate module flickrApp due to:
Error: [$injector:nomod] Module 'flickrApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

 

[dominatrix1]

that's weird I have never put angular in JS fiddle before - It seems to think the flickrApp does not exist - but I defined it in the JS at the top and in the HTML