How to parse JSON-LD returned by "Knowledge Graph Search API" in vue3

Question

It seems I'm too dumb or just blind, because I can't get that right.
My other Google API (Books API) works like a charm.
It's easy going with JSON-styled return data.

But this "Knowledge Graph Search API" of Google returns JSON-LD-styled data.

Doing this in a browser as URL works as expected:

https://kgsearch.googleapis.com/v1/entities:search?query=LoremIpsum&key=VUE_APP_GOOGLE_API_KEY&ident=True

Something like this:

{
  "@context": {
    "goog": "http://schema.googleapis.com/",
    "resultScore": "goog:resultScore",
    "EntitySearchResult": "goog:EntitySearchResult",
    "detailedDescription": "goog:detailedDescription",
    "kg": "http://g.co/kg",
    "@vocab": "http://schema.org/"
  },
  "@type": "ItemList",
  "itemListElement": [
    {
      "result": {
        "@id": "kg:/g/11f266hnh5",
        "name": "Blupp",
        "@type": [
          "Thing"
        ],
        "description": "Song by Jan Garbarek Quartet"
      },
      "@type": "EntitySearchResult",
      "resultScore": 46.472198486328118
    },
    {
      "@type": "EntitySearchResult",
      "result": {
        "name": "Bluppo",
        "@type": [
          "VideoGame",
          "CreativeWork",
          "SoftwareApplication",
          "Thing"
        ],
        "@id": "kg:/m/097m49",
        "description": "Arcade game"
      },
      "resultScore": 19.4659481048584
    },

Now in vue3:

1. My input field:

   <td class="inputField">
      <input @keyup.enter="search" v-model="this.inputTitle" id="global-input" type="text" placeholder="Freitext"/>
      </td>
   

2. My search function

   <script>
   import { globalSearch } from "../api/films-api.js";
   ....
   methods: {
           async search() {
             await globalSearch(this.inputTitle).then((response) => {
               if (response.items) {
                 this.films = response.item;
               } else {
                 this.films = {};
               }
             });
           },
   

3. My globalSearch function

   export async function globalSearch(query) {
   return new Promise((resolve, reject) => {
       console.log("url: " + BASE_URL +
           query +
           "&" +
           key + process.env.VUE_APP_GOOGLE_API_KEY + "&" +
           indent + "True");
   
       fetch(BASE_URL +
               query +
               "&" +
               key + process.env.VUE_APP_GOOGLE_API_KEY + "&"+
               indent + "True"
               )
           .then((response) => {
               resolve(response); // <- a promise Object I can't work with
           })
           .catch((err) => {
               console.log("err: " + err.message);
               reject(err.message);
           });
   });
   }
   

What can I do with this response?

1. When I put it in a console.log(response);
   

[object Response] 2. When I do json.parse(response)
err: JSON.parse: unexpected character at line 1 column 2 of the JSON data 3. resolve(response)
> gives me: undefined

All I need is just the tag '"itemListElement":' and below to read out the 'result' blocks.
Can that be so difficult?
I even played with "jsonld" package (npm install jsonld).
That gives you some obscure methods like flatten and stuff.
Do I really need this? sigh
Please help.

Answer 1

Thanks for investigating...
Now it works, I don't know why, but it works. :-)

resolve(response.json()); is still undefined, when printed to console via console.log() in my function below.

export async function globalSearch(query) {
    return new Promise((resolve, reject) => {
        console.log("url: " + BASE_URL + query + "&" + key + process.env.VUE_APP_GOOGLE_API_KEY + "&"+ indent + "True");
        fetch(BASE_URL +
                query +
                "&" +
                key + process.env.VUE_APP_GOOGLE_API_KEY + "&"+
                indent + "True"
                )
                .then((response) => {
                    resolve(response.json());
                })
                .catch((err) => {
                    reject(err.message);
                });
    });
}

But response.itemListElements holds exactly the data I need.

async search() {
   await globalSearch(this.inputTitle).then((response) => {
      console.log("response.itemListElement: " + response.itemListElement);
       if (response.itemListElement) {
           this.films = response.itemListElement;
       } else {
           this.films = {};
        }
    })
},