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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

JSON

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

React.js

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

Q&A

解決済

1回答

775閲覧

ReactでAPIで取得したJSONの内容を表示したい

Tomo0225

総合スコア67

Visual Studio Code

Visual Studio Codeとは、Microsoft社が開発したマルチプラットフォーム対応のテキストエディタです。Visual Studioファミリーの一員でもあります。拡張性とカスタマイズ性が高く、テキストエディタでありながら、IDEと遜色ない機能を備えることができます。

JSON

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

React.js

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

1グッド

0クリップ

投稿2022/10/19 16:36

編集2022/10/20 15:23

ReactでJSONを取得して内容を表示するコードを書きました。しかし動かしてみるとid: title: summary: url: のように値が入るはずのところに何も入ってないものが出力されてしまいます。
URLのAPIはネットにある簡単なAPIのサンプルを使用しています。
下記のコードでJSONの値が表示されないのはなぜでしょうか。
VSCodeを使用。

ShowJson.js

1import React, { Component } from 'react'; 2 3class ShowJson extends Component { 4 constructor (props) { 5 super(props) 6 this.state = { 7 age: '', 8 name: '', 9 note: '', 10 } 11 } 12 componentWillMount () { 13 const URL = 'https://umayadia-apisample.azurewebsites.net/api/persons/Shakespeare' 14 fetch(URL, {mode: 'cors'}) 15 .then(res => res.json()) 16 .then(json => { 17 this.setState({ 18 age: json['age'], 19 name: json['name'], 20 note: json['note'], 21 }) 22 }); 23 } 24 25 render() { 26 return <div className='ShowJson'> 27 age: {this.state.age} <br /> 28 name: {this.state.name} <br /> 29 note: {this.state.note} <br /> 30 </div> 31 } 32} 33 34export default ShowJson; 35} 36 37export default ShowJson;
gandam👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

質問のコードにある URLにGETリクエストすると、id, title, summary, url というプロパティを持ったオブジェクトのJSONが返される想定のコードになっていますが、本当にそのようなJSONが返ってきていますか?その点を確認してみるとよいでしょう。

追記

以下のように修正するとどうでしょう?

diff

1- .then(json => { 2+ .then(({ data }) => { 3 this.setState({ 4- age: json['age'], 5- name: json['name'], 6- note: json['note'], 7+ age: data.age, 8+ name: data.name, 9+ note: data.note, 10 }) 11

投稿2022/10/19 16:55

編集2022/10/20 05:01
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Tomo0225

2022/10/20 03:49

id,title,summaryはクラス側のプロパティ名?のため、JSON側の名前と合わせる必要はない認識でした。 また名前をJSON側の名前であるage,name,noteに合わせても値が表示されませんでした。
退会済みユーザー

退会済みユーザー

2022/10/20 05:02

回答に追記しました
Tomo0225

2022/10/20 06:23

教えていただいた修正をしたら値が表示されました!。 ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問