jsonファイルを読みJSの配列を返す関数

Question

前提・実現したいこと

JavaScriptでjsonファイルを読み取り配列にして返す関数を作成しようとしましたが, undefinedを返してしまいます。
いい実装方法を教えてください。

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

エラーメッセージ

該当のソースコード

const readjson = path => {
    let jsondata;
    $.getJSON(path, async data => {
        const treasureHuntString = JSON.stringify(data);
        jsondata = await JSON.parse(treasureHuntString);
        ;
    })
    return jsondata;
};

Answer 1

普通にfetchしてはいけないのでしょうか？

fetch(url).then(res=>res.json()).then(console.log)

Comments

[locareen]

ご回答頂きありがとうございます.
console上ではなく戻り値で出力したいのですが, 何かいい方法はありますか？

[yambejp]

consoleに出力できるということは、なんでもできるということです
具体的にどうしたいのですか？

[locareen]

URLを引数に取りparseされたjsonを戻り値にする関数が作りたいです.
consoleには正常に出力できました.

[yambejp]

async を設定した関数の中で、awaitすればよいです

(async()=>{
const url="hoge.json";
const data=await fetch(url).then(res=>res.json());
console.log(data);
})();

逆にasyncの外に持ち出すことはできません。
またajaxを同期処理してはいけません

[locareen]

ありがとうございます.
今回はjsonを読み取ってからさらに別の関数で処理を行いたいのでこちらの方法では難しそうですね...

ありがとうございました！

[yambejp]

繰り返しになりますがajaxで同期処理をしてはいけません

[yambejp]

ちなみにDOMContentLoadedイベントのコールバックにasyncしてやれば
ふつうに処理されます。

window.addEventListener('DOMContentLoaded',async()=>{
var data=await fetch("my.json").then(res=>res.json());
console.log(data);
});

Answer 2

getJSONが非同期のためだと思います。
前後でajaxSetupを使ってみてはどうですか？

const readjson = path => {
    let jsondata;
    $.ajaxSetup({ async: false }); // Ajax通信を同期通信にする
    $.getJSON(path, async data => {
        const treasureHuntString = JSON.stringify(data);
        jsondata = await JSON.parse(treasureHuntString);
        ;
    })
    $.ajaxSetup({ async: false }); // Ajax通信を非同期通信に戻す
    return jsondata;
};

下記は参考です。

• jQuery.getJSON で同期通信させる

Comments

[locareen]

素早い回答をありがとうございます！

[locareen]

nekonikiさんのコードを参考にし, 少しだけ改変をしたら期待通りの挙動になりました。 ありがとうございました。

```js
const readjson = path => {
let jsondata;
$.ajaxSetup({ async: false }); // Ajax通信を同期通信にする
$.getJSON(path, data => {
const treasureHuntString = JSON.stringify(data);
jsondata = JSON.parse(treasureHuntString);
;
})
$.ajaxSetup({ async: true }); // Ajax通信を非同期通信に戻す
return jsondata;
};
```

Answer 3

nekonikiさんのコードを参考にし, 少しだけ改変をしたら期待通りの挙動になりました。 ありがとうございました。

const readjson = path => {
let jsondata;
$.ajaxSetup({ async: false }); // Ajax通信を同期通信にする
$.getJSON(path, data => {
const treasureHuntString = JSON.stringify(data);
jsondata = JSON.parse(treasureHuntString);
;
})
$.ajaxSetup({ async: true }); // Ajax通信を非同期通信に戻す
return jsondata;
};

Answer 4

nekonikiさんのコードを参考にし, 少しだけ改変をしたら期待通りの挙動になりました。 ありがとうございま

const readjson = path => {
    let jsondata;
    $.ajaxSetup({ async: false }); // Ajax通信を同期通信にする
    $.getJSON(path, data => {
        const treasureHuntString = JSON.stringify(data);
        jsondata = JSON.parse(treasureHuntString);
        ;
    })
    $.ajaxSetup({ async: true }); // Ajax通信を非同期通信に戻す
    return jsondata;
};