jsonファイルが1つなら$.ajaxだが…
jQueryを使用する際にjsonを読み込むには$.ajaxやが使用されることが多い。
たまに$.ajaxを入れ子にして複数のjsonを読み込んでいるコードを見かけることがあるのだが、jQueryには$.whenという複数の非同期処理を行うメソッドが用意されているのでこちらを使用したほうが良い。
// bad
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1'
}).then(function(todo1) {
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/2'
}).then(function(todo2) {
console.log(todo1)
console.log(todo2)
})
})
// good
$.when(
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/1'
}),
$.ajax({
url: 'https://jsonplaceholder.typicode.com/todos/2'
})
).then(function(todos1, todos2) {
const todo1 = todos1[0]
const todo2 = todos2[0]
console.log(todo1)
console.log(todo2)
})
jQueryを使わず複数のjson取得
jQueryを使わずJavaScriptでjsonを読み込む場合は最近はfetchがよく使用される。
const url = 'https://jsonplaceholder.typicode.com/todos/1'
fetch(url)
.then(res => res.json())
.then(data => console.log(data))
しかし、fetchで指定できるurlは1つだけなので複数のjsonのURLを読み込む関数を作成する必要がある。
1番簡単なのは引数で配列を受け取って、それをmapでfetch入りでまとめてawait Promise.allで実行する方法だ。
async function fetchURLs(urls) {
try {
const fetchUrls = urls.map(url => fetch(url).then(res => res.json()))
const [todo1, todo2] = await Promise.all(fetchUrls)
console.log(todo1)
console.log(todo2)
} catch (error) {
console.error(error)
}
}
fetchURLs([
'https://jsonplaceholder.typicode.com/todos/1',
'https://jsonplaceholder.typicode.com/todos/2'
])
上記の記述であればコード量が少なく、誰でも簡単に使えるだろう。
