@Aoky

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

javascriptのfetchでjsonのvalueの値が数字に代わる

javascriptのfetchでJSONの形式が変わってしまう

javascriptのfetchを使って、webapiをJSON形式で取得したいのですが、valueの値が数字に置き換わってしまいます

求めているJSONの形式

curlを使って、JSONファイルに出力すると、求めている形式になる
image.png

javascriptのfetchを使ったJSONの形式

image.png
このように、レスポンスの形式が変わってしまいます

例)

Curlした時.
"nickname": "ao",

curlした時のJSONは、keyとvalueの関係が正常です

fetchした時.
0: {playerInfo: 1, avatarInfoList: 34, ttl: 585, uid: 1007, _title: 1008}
1: {nickname: 2, level: 3, signature: 4, worldLevel: 5, nameCardId: 6, …}
2: "ao"
3: 58
4: "刻晴すり抜けてくれ"
5: 8
6: 210020
7: 527
8: 12
9: 3

このように
1:{nickname: 2, …
2: "ao"
となり、"nickname"のvalueが配列の番号に起き変わってしまっています。

使用しているAPI

enka.networkという原神のデータを取得するAPIを使用しています

ソースコード

async function callApi(){
    const uid = document.getElementById("uid").value
    const res = await fetch(`https://enka.network/u/${uid}/__data.json`);
    console.log(res)
    const user = await res.json()
    return user
}

async function pushButton(){
    try{
        const response = await callApi()
        await console.log(response)
        await console.log(response.nodes[1].data[10])
    }catch(e){
        console.error("エラー:",e)
    }
}

試したこと

image.png

Curlするときに、Contentの部分には、javascriptでfetchした時と同じ結果が出力されていました。ですが、jsonファイルで出力すると、求めている形式になります。

投稿者自身APIを使うことに慣れていないので、なるべくかみ砕いて説明していただければありがたいです。

0 likes

6Answer

resres.json()では指すものが違うので当然内容が異なりますが,両者のログは区別できていますか?
通常必要のない前者のログ出力を削って確認してください.

あとconsole.logawaitは不要です.
awaitが必要なのはあくまでasyncな関数の実行を待つときです.

0Like

Comments

  1. @Aoky

    Questioner

    ありがとうございます。
    質問の時にアップした写真はres.json()のコンソール出力です。
    resの方も確認してみたのですが、body、header、statusなどの状態があるだけでした。
    async、awaitに関しては学び直します。

見てるものが違うからです。

質問のコードの、

const user = await res.json()

user には api から返ってきた JSON 文字列を JavaScript オブジェクト (連想配列) にデシリアライズした結果が代入されます。質問の上から 2 つ目の画像はそれをコンソールに書き出して見てますよね。

一方、curl の方で見ているのは api から返ってきた JSON 文字列そのものを見てますよね。

だから結果が違うのでしょう。

以下のようにしてみたらどうなりますか?

const user = await res.text();

0Like

Comments

  1. @Aoky

    Questioner

    ありがとうございます。
    res.text()で試してみたのですが、JSON形式にする前の結果が出力されて、curlした時のようにはいきませんでした。(keyとvalueのvalueが配列の番号のままでした)
  2. コメント単には画像は貼れないようなので別の回答欄で返答します。

すいません、解決しました!
このapiのドキュメントを日本語で読んでいたのですが、英語で読んでみたところ、apiを呼び出すリンクが変更されていたらしく、日本語ドキュメントではまだ反映されていませんでした。
リンクを変更してみたところ、curlの結果と同じようになりました。
お二方ご回答ありがとうございました!

0Like

res.text()で試してみたのですが、JSON形式にする前の結果が出力されて、curlした時のようにはいきませんでした。

それはどこかあなたのやり方が間違っています。きちんと試してから返事してください。

例えば GET 要求に対して以下のような JSON 文字列を返す Web API に対して、

fiddler.jpg

以下のように要求をかけた結果、

const test = async () => {
    let response = await fetch(url);
    if (response.ok) {
        const data = await response.json();
        console.log(data);
    }

    response = await fetch(url);
    if (response.ok) {
        const json = await response.text();
        console.log(json);
    }
}

コンソール出力は以下の通りとなります。

result1.jpg

上に言った通り、response.json() の方は JSON 文字列をデシリアライズした JavaScript オブジェクトに、response.text() の方は JSON 文字列になっているのが分かりますか? 

0Like

リンクを変更してみたところ、curlの結果と同じようになりました。

それ絶対違うと思う。イイカゲンすぎませんか?

0Like

すみません私の勘違いでした。
curlでJSONファイルに出力したのは1ケ月ほど前でして、その時には
image.png
このようなJSONだったのですが、今もう一度curlしてみたところ、javascriptでfetchした時と同じ結果になりました。
image.png
image.png
結局、crulの結果もfetchの結果も一緒でした。

0Like

Your answer might help someone💌