-1

I've been tasked to build an API that will get data from Flickrs public photo.search API and then feed these pictures to my website. I've used a lot of YouTube videos to try and create my API because I'm totally new to this, I've only written HTML, CSS and basic Java.

But now when I've started my http-server with npm no picture is showing and I'm getting an error in the console in Chrome. Could someone help me get this going? Thanks

let pagenr=1;
let query ="";

async function Photos(pagenr) {
    const data = await fetch(
        `https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f594577bccc78a7056049a0aaa2d1cc2&per_page=10&format=json&nojsoncallback=1&text=MarvelUniverse`, 
        {
            method:"GET",
            headers : {
            Accept: "application/json",
           
            },
        }
    );
    const result=await data.json();
    console.log(result);
    const pic=document.createElement("div");
        document.querySelector(".gallery").appendChild(pic);
    };
Photos(pagenr);

EDIT: I've tried to change the .json to .text and the error is gone but I'm now getting the raw json string from the Flickr API. I want that json to be converted to an object to display as an image in the HTML with http-server. Any help is appreciated!

EDIT 2: Changed the API URL and back to .json and all seems good but can't get anything to be displayed in my HTML.

VLAZ
  • 26,331
  • 9
  • 49
  • 67
Apollo21
  • 1
  • 1
  • 2
    Have you tried simply looking at the response instead of trying to parse it as JSON, i.e. using `.text` instead of `.json`? – Sebastian Simon Feb 11 '22 at 17:46
  • Look not only in the devtools console, but also in the network panel. Are you actually getting the response you expect? – Bergi Feb 11 '22 at 17:53
  • @SebastianSimon thanks for the reply, I've now changed the .json to .text and I'm not getting the error message any more. I've also looked at the network panel after this change and what I'm getting from the GET request is "FlickrPhotoSearch({"photos":{"page":1,"pages":15604,"perpage":1,"total":15604,"photo":[{"id":"51875100759","owner":"156443183@N08","secret":"4839110bbe","server":"65535","farm":66,"title":"loki","ispublic":1,"isfriend":0,"isfamily":0}]},"stat":"ok"})". I not want to display this image in the HTML, can you help me with this? Thanks u so much – Apollo21 Feb 11 '22 at 20:27
  • `.text` wasn’t intended to _fix_ the issue but to _debug_ it. So, that’s where the error comes from: `FlickrPhotoSearch(`…`)` is **JSONP**, where `FlickrPhotoSearch` is the intended callback; it’s not JSON. Are you sure you understand what `jsoncallback` in the URL is doing? If not, read the documentation again. Try to _only_ get JSON, not JSONP. – Sebastian Simon Feb 12 '22 at 04:04
  • @SebastianSimon Hi, I've updated my URL to this "https://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f594577bccc78a7056049a0aaa2d1cc2&per_page=10&format=json&nojsoncallback=1&text=MarvelUniverse" I'm now getting the corrent JSON from what I can see. Now I want to be able to display this in my HTLM but nothing is showing. Sorry if I'm asking a lot of questions I'm completely new to this. – Apollo21 Feb 12 '22 at 08:01
  • @Apollo21 Where do you try to display parts of `result` in HTML? See [How can I access and process nested objects, arrays or JSON?](/q/11922383/4642212) and [`Image`](//developer.mozilla.org/docs/Web/API/HTMLImageElement/Image). – Sebastian Simon Feb 12 '22 at 13:11
  • @SebastianSimon how would you display the result in HTML in my case? Any examples? Thanks – Apollo21 Feb 12 '22 at 18:04

1 Answers1

1

The issue is because inside the URL you have jsoncallback=FlickrPhotoSearch which is designed to help invoke a function after an API call. This actually means the response type is no longer valid JSON which is causing the error you are seeing. You want to get the raw JSON, for the Flickr API you need to add nojsoncallback=1 and remove jsoncallback=FlickrPhotoSearch from the API URL.

You seemed to have posted the URL with your API key included inside too, this meant I was able to access the link using your API credentials and anyone else can do the same. You should change this key as soon as possible.

Conor Reid
  • 578
  • 3
  • 16