Help us understand the problem. What is going on with this article?

console.logでJSONから特定の要素を取り出す方法

JavascriptでJSONから特定の要素を取り出す際の考え方が配列のときと少し異なるのでまとめました。

JSONとは

  • JavaScript Object Notationの略。直訳すると「Javascriptオブジェクト記法」ということになる。JSONにおけるJavascriptオブジェクトとは基本的には、{}(オブジェクト)と[](配列)を組み合わせてデータ構造を表現したものをJSONとして扱うことができる。

→つまり、JSONとは、{}(オブジェクト)と[](配列)を組み合わせてデータ構造のこと。

JSONの特定の要素の取り出し方

example.tsx
const messageArrayContainer: any[] = [{
    "text": ["Suzuki", "Yamada", "Miyazaki" ]
    "user": {"_id": 1, "avatar": "", "name": ""}
  }];

console.log('データ' + JSON.stringify(messageArrayContainer, replacer));
console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );
//データ
[{
    "text": ["Suzuki", "Yamada", "Miyazaki" ]
    "user": {"_id": 1, "avatar": "", "name": ""}
  }]

//userデータ
{"_id": 1, "avatar": "", "name": ""}

ここで、注意なのが、配列と同じように考えると、userデータのみを取り出したいときに、下記のように書きたくなるがこれだとundefinedが表示される。

example1.tsx
console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );

//結果は,undefinedになる

JSONは大きな一つの要素と考え、

example2.tsx
console.log('userデータ' + JSON.stringify(messageArrayContainer[0].user, replacer) );

//出力: userデータ{"_id": 1, "avatar": "", "name": ""}

と書く。

romutsu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away