質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

解決済

fetchしてきたネストされているjsonデータにアクセスしたい

lul
hatano

総合スコア1

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

2回答

0リアクション

0クリップ

225閲覧

投稿2022/08/08 04:25

前提

javascriptでapiを叩き、ネストされているjsonデータを取得しようとしたら以下のエラーメッセージが出ました。

Uncaught TypeError: Cannot read properties of undefined (reading '0')
at App.render (JSON.js:27:1)
at finishClassComponent (react-dom.development.js:19752:1)
at updateClassComponent (react-dom.development.js:19698:1)
at beginWork (react-dom.development.js:21611:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)

ネストされていないデータは問題なく取得できました。
fetchしてきたjsonも、resultsの中身も問題なく取得できています。

以下は取得したいjsonです
{
"count": 327,
"next": "https://pokeapi.co/api/v2/ability/?offset=20&limit=20",
"previous": null,
"results": [
{
"name": "stench",
"url": "https://pokeapi.co/api/v2/ability/1/"
},
{
"name": "drizzle",
"url": "https://pokeapi.co/api/v2/ability/2/"
}
]
}

実現したいこと

ネストされているデータを取得し、ローカルのWebページに表示させる

該当のソースコード

JavaScript

import React, {Component} from "react" class App extends Component { constructor(){ super() this.state = { loading:false, character:{}, } } componentDidMount(){ this.setState({ loading: true }) fetch("https://pokeapi.co/api/v2/ability/") .then(response => response.json()) .then(data => { this.setState({ character: data, loading: false }) }) } render() { const displayText = this.state.loading ? "now loading...." : this.state.character.results[0].name //results[0]がundefinedと表示され、displayTextの出力が意図したものにならない console.log(this.state.character.results)    //こちらは問題なく表示される return ( <div> {displayText} </div> ) } } export default App

試したこと

・count、next、previousを取得(成功)
・resultsの全体をconsoleで表示(成功)
・resultsの特定の番目をconsoleで表示(失敗)Uncaught TypeError: Cannot read properties of undefined (reading '特定の番目')

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

退会済みユーザー

退会済みユーザー

2022/08/08 04:42 編集

fetch待たずにレンダリングしているだけなんじゃないの? そうならasync/awaitを補えば済みそうな気がするけれど。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

JSON

JSON(JavaScript Object Notation)は軽量なデータ記述言語の1つである。構文はJavaScriptをベースとしていますが、JavaScriptに限定されたものではなく、様々なソフトウェアやプログラミング言語間におけるデータの受け渡しが行えるように設計されています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。