Client side request to opengraph.io

Question

I'm trying to use opengraph.io in the client side. They have docs for jQuery which I've based my code on: https://www.opengraph.io/examples/jquery-opengraph-example/

      const url = 'http://cnet.com';
      const urlEncoded = encodeURIComponent(url);
      const apiKey = 'MY-KEY';
      const requestUrl = 'https://opengraph.io/api/1.1/site/' + urlEncoded + '?app_id=' + apiKey;
      fetch(requestUrl).then(res => {
        console.log(res);
        console.log(res.body);
      });

The response I get from res appears to be successful but doenst have the data I need.

body: (...)
bodyUsed: false
headers: Headers {}
ok: true
redirected: false
status: 200
statusText: ""
type: "cors"
url: "https://opengraph.io/api/1.1/site/http%3A%2F%2Fcnet.com?app_id=MY-KEY"

I tried logging out res.body but it just returns:

ReadableStream {locked: false}

I found a similar question here but the API seems to return res.data which isnt the case for me:

How to get Open Graph meta from URL input on the client side

score 0 · Answer 1 · answered Jul 07 '21 at 12:59

You'll need to add res.json() to convert the ReadableStream into some JSON.

For example, with an invalid key, just to show the output:

const url = 'http://cnet.com';
const urlEncoded = encodeURIComponent(url);
const apiKey = 'MY-KEY';
const requestUrl = 'https://opengraph.io/api/1.1/site/' + urlEncoded + '?app_id=' + apiKey;

fetch(requestUrl)
  .then(res => res.json())
  .then(json => console.log(json));

Client side request to opengraph.io

1 Answers1