Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
mrchow19910319

Retrieve JSON data from youtube.

Recommended Posts

Posted · Original PosterOP

I am building this website where you can view some specific youtube channel's video.

I am utilizing youtube's data API v3.

 

Spoiler

screencapture-127-0-0-1-5500-index-html-2018-12-08-18_21_17.thumb.png.b0da68be03edb063369625ce1e4071e5.png

And in this video, @ 36:00 the dev actually used jquery's $.getJSON function to make a HTTP request.

    function loadVids() {
        $.getJSON(URL, options, function (data) {
            var id = data.items[0].snippet.resourceId.videoId;
            mainVid(id);
            resultsLoop(data);
        });
    }

But I do not want to use jQuery. I want to try to get the HTTP request using fetch.

Here's my javascript code: 

<deleted cos the API was in it oops>

And in the console, I got this error message, 

424287271_ScreenShot2018-12-08at6_29_14PM.png.4c4d57a15f5c3f5e52e3daa5ed9660f0.png

 

If everything was right, I was supposed to get this result instead: 

 

59373570_ScreenShot2018-12-08at6_32_28PM.png.64961986c70c896861dd9897d5a59421.png

 

So, my question is, where did I got it wrong? 


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Posted · Original PosterOP
3 minutes ago, duncannah said:

You're not sending the options


fetch(URL, {
  method: 'POST',
  body: options
})
  .then(response => response.json())
  .then((out) => {
    console.log('Checkout this JSON! ', out);
  })
  .catch(err => {
    throw err
  });

I used the above code got a 401 error, and says log in required. 

Does that mean that If I want to use fetch, I have to use OAuth? 


If it is not broken, let's fix till it is. 

Link to post
Share on other sites

Whoops, sorry

Try this:

URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');

/* your original fetch code */

 


( ・∀・)・・・--------☆

Link to post
Share on other sites
Posted · Original PosterOP
2 minutes ago, duncannah said:

Whoops, sorry

Try this:


URL += '?' + Object.keys(options).map((k) => k + '=' + encodeURIComponent(options[k])).join('&');

/* your original fetch code */

 

my original code has URL set to const. I changed it to var.

still, same error.


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Posted · Original PosterOP

OMG I felt that you are a god that can just spill out code that works....

im so junior...... :( 

 


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
Just now, mrchow19910319 said:

my original code has URL set to const. I changed it to var.

 still, same error.

Use your old fetch code, not the first one I gave you


( ・∀・)・・・--------☆

Link to post
Share on other sites
Posted · Original PosterOP
1 minute ago, duncannah said:

Use your old fetch code, not the first one I gave you

it worked,,,, care to explain why??


If it is not broken, let's fix till it is. 

Link to post
Share on other sites
3 minutes ago, mrchow19910319 said:

it worked,,,, care to explain why??

You didn't send your options (parameters) the first time.

 

On a GET request, the parameters has to be included in the URL (?foo=bar&var1=var2). JQuery's getJSON method can add your parameters to the URL from an object, but the fetch method can't do this yet, so you have to do this yourself (which is what my last code does). 


( ・∀・)・・・--------☆

Link to post
Share on other sites
Posted · Original PosterOP
21 minutes ago, duncannah said:

You didn't send your options (parameters) the first time.

 

On a GET request, the parameters has to be included in the URL (?foo=bar&var1=var2). JQuery's getJSON method can add your parameters to the URL from an object, but the fetch method can't do this yet, so you have to do this yourself (which is what my last code does). 

may I ask how long have you been into this field??

 

I felt like I know nothing...


If it is not broken, let's fix till it is. 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×