@starMagichatposted at 2024-06-22

nextjsで特定のjsonデータを出力したい

Q&A

Closed

解決したいこと

https://weather.tsukumijima.net/api/forecast/city/400040

今回APIの学習を行っており、上のURLのjsonデータ全体を取得したいです。（もしよろしければ、keyを指定して、特定の部分だけ抽出する方法も教えていたけると助かります。）

自分で書いたコード

// import type { NextApiRequest, NextApiResponse } from 'next'
import React from 'react';


export default async function Page() {
    // This request should be cached until manually invalidated.
    // Similar to `getStaticProps`.
    // `force-cache` is the default and can be omitted.
    const staticData = await fetch(`https://weather.tsukumijima.net/api/forecast/city/400040`, { cache: 'force-cache' })
    const staticd = staticData.json()

    return <h1>{staticd}</h1>


}

自分で試したこと

とりあえず自分で調べて、私の認識では

await fetchは特定のエンドポイントにアクセスして、jsonデータの元となるものをとってくるものである、
その元になってるものを.json()メソッドでjsonに加工することができる、

そう考えましたが、そもそもその認識が間違っているのでは？と思ったので、そこも誤りがあれば教えていただけると幸いです。

また今回意図した動作は

{
    "publicTime": "2024-06-22T05:00:00+09:00",
    "publicTimeFormatted": "2024/06/22 05:00:00",
    "publishingOffice": "福岡管区気象台",
    "title": "福岡県 久留米 の天気",
    "link": "https://www.jma.go.jp/bosai/forecast/#area_type=offices&area_code=400000",
    "description": {
        "publicTime": "2024-06-22T04:45:00+09:00",
        ....（省略）

このようなjsonデータが
npm run devを行いlocalhost3000/api-1にアクセスしたら、
画面に表示されることを想定しています。
（appフォルダの中にapi-1というフォルダにpage.tsxというファイルに書いたコードが*1のコードです。）

もしよろしければ、教えていたけると幸いです。

1Answer

@SurferOnWww posted at 2024-06-22

const staticd = staticData.json() にも await が必要で const staticd = await staticData.json() としてください。

結果の staticd には JSON 文字列を JavaScript オブジェクトにデシリアライズした結果が得られるはずです（もちろん JSON 文字列が不正でなければですが）。

なので、<h1>{staticd}</h1> とするのはダメで、JavaScript オブジェクトから値を取得してそれを設定してください。

keyを指定して、特定の部分だけ抽出する方法

例えば publicTime を取得したいということであれば staticd.publicTime としてみてください。"2024-06-22T05:00:00+09:00" という文字列が取得できると思います。

2Like

Comments

@starMagichat
Questioner
ありがとうございます！無事できました。
あともう二つ個人的に聞いてみたいことがありまして、
さらに詳しい情報をgeminiやgoogleで調べてみたのですが、
まずgetリクエスト以外のことをするパターン
例えばpostの方を行う場合はそちらもfetchを使い
第一引数のエンドポイント指定の次の引数にmethod: 'POST',とpostを指定しさらにその次の引数に body: JSON.stringify(javascript or typescriptオブジェクト),という形で送りたいデータを置くという認識でよろしいでしょうか
(下にイメージを置いておきます)
export default async function Page() { const data = { name: 'John Doe', email: 'johndoe@example.com', }; const response = await fetch('https://api.example.com/users', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data), }); const responseData = await response.json(); console.log(responseData); }
もう一つはトークンなど鍵が必要な場合でgetがございますが、この場合は

headers: {
'X-API-Token': token,
},このようにコードを書けばリクエストのヘッダーにトークンを追加できますでしょうか
（下記は具体的なイメージです）
export default async function Page() { const token = '<YOUR_TOKEN>'; // 実際のトークンに置き換えてください const staticData = await fetch('https://weather.tsukumijima.net/api/forecast/city/400040', { headers: { 'X-API-Token': token, }, cache: 'force-cache', }); // 以下は省略... }
XとLINEでのAPIで使う機会がある可能性がございまして、お時間があればお聞きできると嬉しいです。
@SurferOnWww
表題の「特定のjsonデータを出力したい」は解決したと思いますが、であればこのスレッドはクローズしてください。

一つのスレッドでは一つの質問とそれに対する答えだけになるようにしてください。一つの疑問の解決が次の疑問を呼んで、次から次へと質問を繰り返すのは避けてください。そういうことをされると、スレッドの内容がごっちゃになって訳が分からなくなります。

ここはあなた専用の Q&A サイトではなく、あとで検索などでここにたどり着いた人などにも情報を提供することを目的にしている（はず）ということをお忘れなく。
@starMagichat
Questioner
申し訳ございません。
確かにそうですね、こちらの2つの質問は
また別のスレッドで質問しますね。

また質問もクローズしておきました。

Are you sure you want to delete the question?