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

Retrieve JSON data from youtube.

mrchow19910319
 Share

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 comment
Share on other sites

Link to post
Share on other sites

You're not sending the options

-snip-

Intel Core i3-10100 - Gigabyte Z490M - HyperX DDR4 16GB  - 500W - 1x 1080p - macOS 12 Monterey, Windows 11

Intel Core i5-4210U - Acer Aspire E5-573G - 8GB - 768p - macOS 11 Big Sur, Windows 11
iPhone 12 - iOS 15

Link to comment
Share on other sites

Link to post
Share on other sites

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 comment
Share on other sites

Link to post
Share on other sites

Use OAuth to ask user to login with their youtube account? 

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

Link to comment
Share on other sites

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 */

 

Intel Core i3-10100 - Gigabyte Z490M - HyperX DDR4 16GB  - 500W - 1x 1080p - macOS 12 Monterey, Windows 11

Intel Core i5-4210U - Acer Aspire E5-573G - 8GB - 768p - macOS 11 Big Sur, Windows 11
iPhone 12 - iOS 15

Link to comment
Share on other sites

Link to post
Share on other sites

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 comment
Share on other sites

Link to post
Share on other sites

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 comment
Share on other sites

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

Intel Core i3-10100 - Gigabyte Z490M - HyperX DDR4 16GB  - 500W - 1x 1080p - macOS 12 Monterey, Windows 11

Intel Core i5-4210U - Acer Aspire E5-573G - 8GB - 768p - macOS 11 Big Sur, Windows 11
iPhone 12 - iOS 15

Link to comment
Share on other sites

Link to post
Share on other sites

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 comment
Share on other sites

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). 

Intel Core i3-10100 - Gigabyte Z490M - HyperX DDR4 16GB  - 500W - 1x 1080p - macOS 12 Monterey, Windows 11

Intel Core i5-4210U - Acer Aspire E5-573G - 8GB - 768p - macOS 11 Big Sur, Windows 11
iPhone 12 - iOS 15

Link to comment
Share on other sites

Link to post
Share on other sites

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 comment
Share on other sites

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
 Share


×