JavaScriptで外部APIで取得したJSONデータをオブジェクトとして扱いたい

Question

前提・実現したいこと

タイトルの通りです。

JSON.parse()を使うことはわかったのですが、parse()を使おうとするとエラーメッセージが出てきてしまいます。
オブジェクトとしてデータを扱うにはどうすればいいか教えてください。
また、基本的な部分が理解できていない可能性があるので説明など添えて頂けると幸いです。
よろしくお願い致します。

発生している問題・エラーメッセージ

Uncaught (in promise) SyntaxError: Unexpected token o in JSON at position 1
    at JSON.parse (<anonymous>)

該当のソースコード

const DATA_URL = 'https://opentdb.com/api.php?amount=10';
  fetch(DATA_URL)
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonDATA) {
    var obj = JSON.parse(jsonDATA);
  })

試したこと

stringifyだと正常に動作します。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

最初のthen内でjsonで受けてオブジェクトに変換してるので
次のjsonDATAはすでにもうオボジェクトです

あえてかくなら
var obj=jsonDATA;

Comments

[mt-0509]

回答ありがとうございます。
すでにオブジェクトになっているのは理解できたのですが、このオブジェクトを呼ぶにはどうすればいいのでしょうか。
json.typeのようにするとundefinedになってしまいます。
重ねての質問で申し訳ありませんが、よろしくお願い致します。

Answer 2

※取得できるオブジェクトの構造は把握されていますか？
把握できている前提で話を進めます。

前の方も回答している通り、すでにオブジェクトになっていますので、
たとえば、以下のようにconsole.logで中身を確認できます。

const DATA_URL = 'https://opentdb.com/api.php?amount=10';
  fetch(DATA_URL)
  .then(function(response) {
    return response.json();
  })
  .then(function(jsonDATA) {
    console.log(jsonDATA);//中身を確認
    console.log(jsonDATA.results[0])//1件目のデータを確認
  })

取得できるjsonの構造を見たところ、
10件のデータが取得できるようなので、
jsonDATA.results[0]～[9]に値が入っています。

Comments

[mt-0509]

丁寧に解説して頂き、ありがとうございました！
ようやく理解できました。

Answer 3

const DATA_URL = 'https://opentdb.com/api.php?amount=10';
const obj = await fetch(DATA_URL)
    .then(response => response.json());

console.log(obj.results[0].type);
//=> multiple
console.log(obj.results.map(result => result.type));
//=> ["multiple", "multiple", "multiple", "multiple", "multiple", "multiple", "multiple", "multiple", "multiple", "multiple"]

Comments

[mt-0509]

回答ありがとうございました！
無事解決することができました。