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

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

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

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JSON

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

Q&A

解決済

2回答

1559閲覧

webAPIから返ってきたjsonのパラメータを参照することが出来ない。

chiba_kun

総合スコア16

Firebase

Firebaseは、Googleが提供するBasSサービスの一つ。リアルタイム通知可能、並びにアクセス制御ができるオブジェクトデータベース機能を備えます。さらに認証機能、アプリケーションのログ解析機能などの利用も可能です。

JSON

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

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

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

0グッド

1クリップ

投稿2020/01/24 06:32

編集2020/01/24 08:43

抱えている問題

webAPIから返ってきたJSONのパラメータを取り出したのですが、取り出せません。

###問題の詳細
ブラウザからcloud function にリクエストを送る → リクエストトリガーが発動して、cloudfunction側からwebAPIにリクエストを送る→

webAPIから返ってきたjsonをブラウザに表示する、という処理を実現したいです。

webAPIから返ってきたjsonをブラウザに表示するということは出来ました。下記実行したコードと、結果を表すブラウザのスクショです。

function callback(error, responsedayo, body) { if (!error && responsedayo.statusCode == 200) { response.send(body); } }

イメージ説明

しかし、全てのパラメータが必要な訳ではなく、ブラウザに表示したいのは一部のパラメータだけです。
なのでコードを下記のように変えました。ブラウザには何も表示されず、コンソールにはundefinedと表示が出ます。

function callback(error, responsedayo, body) { if (!error && responsedayo.statusCode == 200) { response.send(body.request_id);    console.log(body.request_id) } }

###試してみたこと

body[request_id] body["request_id"]

パラメータへの参照方法が間違っているのかなと思い上記のように実行してみましたが勿論上手くいかず。

let body2 = JSON.stringify(body); console.log(body2.request_id)

jsonを普通のオブジェクトに変えてから、参照してみるということもしてみましたが、変わらずパラメータの参照は出来ず。

let chiba={ "name": "太郎", "age": 100, "gender": "男" }; console.log("ジェイソンを表示するよ"); console.log(chiba); console.log(chiba.name); console.log(chiba.gender); console.log("オブジェクトに変えるよ"); chiba = JSON.stringify(chiba); console.log(chiba); console.log(chiba.name); console.log(chiba.gender);

そもそもnode.js側からjsonファイルを参照出来るのか、確かめる為に上記のコードを実行しました。ついでに同じコードをhtmlのscriptにも記述して実行。

htmlのscriptから実行すると、当然上手くいくのですが、なぜかnode.js側からはjsonのパラメータの参照は出来るものの、オブジェクトのパラメータの参照は出来ず。

node.js側からオブジェクトのパラメータの参照が出来ないのはとりあえず置いておいて、jsonのパラメータの参照が出来るのなら、webapiから受け取ったjsonのパラメータも参照出来るはずなのに、どうしてなのかなと頭がちんぷんかんぷんに。

そもそもwebapiから受け取った値がもしかしたらjsonではない他のデータ形式なのかなと思い調べてみることに。

bodyをブラウザに表示した時、キーはダブルクオーテーションで囲まれていたので、普通に考えたらjsonなのですが、もしかしたら間違ってるかもしれないので。。。

webapiドキュメント

イメージ説明

公式ドキュメントにサンプルレスポンスが書かれていましたが、これがjsonなのかどうかについては書かれておらず。キーがダブルクオーテーションで囲まれていたら、jsonだと思っているんですが、違うんですかね、、、。

413 Request Entity Too Large

The request entity has exceeded the limit (2MB). This error message will be returned in plain text, instead of JSON.

ステータスコードが413の時はjsonではなくプレーンテキストで返すよ、という旨が書かれていので、翻るすと成功したらjsonで返ってくるということみたいです。

質問

ということでwebapiから返ってきたjsonを全てではなく、キーを用いて一部のパラメータだけ取り出したいのですが、上手くいきません。

問題の解決に繋がるかもしれないキーワードやヒント、記事などを教えていただけたら幸いです。

※また質問文の中で、質問とは直接関係はないが、用語の使い方を間違えていたり、何か大きな勘違いをしている節があれば、それらについて指摘などをしてくださると、成長に繋がるので指摘していただけると幸いです。

追記

回答の通りjsonをJSON.parseしてオブジェクトに変換してみることに。結果は上手くいきませんでした。
ダブルクオーテーションが外れていないので、parseが出来なていないんですかね、、、?。?

function callback(error, responsedayo, body) { if (!error && responsedayo.statusCode == 200) { const obj = JSON.parse(body); response.send(obj); } }

json.parseしたオブジェクトをブラウザに出力。

1{"request_id":"1579854042,cf2754ce-7371-4deb-99ed-7142ce917daa","time_used":920,"faces":[{"face_token":"79536e36c0c38ef8046cd789e60b2041","face_rectangle":{"top":421,"left":723,"width":409,"height":409},"landmark":{"contour_chin":{"x":989,"y":811},"contour_left1":{"x":694,"y":557},"contour_left2":{"x":710,"y":601},"contour_left3":{"x":730,"y":642},"contour_left4":{"x":752,"y":683},"contour_left5":{"x":777,"y":722},"contour_left6":{"x":808,"y":757},"contour_left7":{"x":846,"y":784},"contour_left8":{"x":888,"y":805},"contour_left9":{"x":936,"y":817},"contour_right1":{"x":1090,"y":452},"contour_right2":{"x":1098,"y":496},"contour_right3":{"x":1102,"y":540},"contour_right4":{"x":1102,"y":584},"contour_right5":{"x":1099,"y":628},"contour_right6":{"x":1091,"y":672},"contour_right7":{"x":1078,"y":713},"contour_right8":{"x":1059,"y":753},"contour_right9":{"x":1032,"y":788},"left_eye_bottom":{"x":820,"y":533},"left_eye_center":{"x":818,"y":522},"left_eye_left_corner":{"x":780,"y":529},"left_eye_lower_left_quarter":{"x":799,"y":534},"left_eye_lower_right_quarter":{"x":839,"y":527},"left_eye_pupil":{"x":825,"y":518},"left_eye_right_corner":{"x":855,"y":517},"left_eye_top":{"x":816,"y":508},"left_eye_upper_left_quarter":{"x":796,"y":516},"left_eye_upper_right_quarter":{"x":838,"y":507},"left_eyebrow_left_corner":{"x":724,"y":504},"left_eyebrow_lower_left_quarter":{"x":754,"y":496},"left_eyebrow_lower_middle":{"x":785,"y":486},"left_eyebrow_lower_right_quarter":{"x":817,"y":479},"left_eyebrow_right_corner":{"x":850,"y":468},"left_eyebrow_upper_left_quarter":{"x":748,"y":479},"left_eyebrow_upper_middle":{"x":781,"y":466},"left_eyebrow_upper_right_quarter":{"x":816,"y":461},"mouth_left_corner":{"x":895,"y":734},"mouth_lower_lip_bottom":{"x":971,"y":755},"mouth_lower_lip_left_contour1":{"x":930,"y":729},"mouth_lower_lip_left_contour2":{"x":917,"y":748},"mouth_lower_lip_left_contour3":{"x":941,"y":757},"mouth_lower_lip_right_contour1":{"x":992,"y":713},"mouth_lower_lip_right_contour2":{"x":1012,"y":722},"mouth_lower_lip_right_contour3":{"x":996,"y":742},"mouth_lower_lip_top":{"x":963,"y":724},"mouth_right_corner":{"x":1023,"y":700},"mouth_upper_lip_bottom":{"x":961,"y":721},"mouth_upper_lip_left_contour1":{"x":939,"y":703},"mouth_upper_lip_left_contour2":{"x":916,"y":718},"mouth_upper_lip_left_contour3":{"x":929,"y":727},"mouth_upper_lip_right_contour1":{"x":972,"y":694},"mouth_upper_lip_right_contour2":{"x":998,"y":696},"mouth_upper_lip_right_contour3":{"x":991,"y":711},"mouth_upper_lip_top":{"x":957,"y":703},"nose_contour_left1":{"x":877,"y":516},"nose_contour_left2":{"x":888,"y":610},"nose_contour_left3":{"x":910,"y":651},"nose_contour_lower_middle":{"x":938,"y":652},"nose_contour_right1":{"x":932,"y":503},"nose_contour_right2":{"x":965,"y":592},"nose_contour_right3":{"x":963,"y":639},"nose_left":{"x":884,"y":646},"nose_right":{"x":984,"y":622},"nose_tip":{"x":933,"y":619},"right_eye_bottom":{"x":998,"y":477},"right_eye_center":{"x":995,"y":470},"right_eye_left_corner":{"x":960,"y":486},"right_eye_lower_left_quarter":{"x":979,"y":482},"right_eye_lower_right_quarter":{"x":1016,"y":469},"right_eye_pupil":{"x":999,"y":467},"right_eye_right_corner":{"x":1032,"y":459},"right_eye_top":{"x":990,"y":459},"right_eye_upper_left_quarter":{"x":973,"y":470},"right_eye_upper_right_quarter":{"x":1011,"y":456},"right_eyebrow_left_corner":{"x":937,"y":445},"right_eyebrow_lower_left_quarter":{"x":964,"y":437},"right_eyebrow_lower_middle":{"x":989,"y":427},"right_eyebrow_lower_right_quarter":{"x":1015,"y":420},"right_eyebrow_right_corner":{"x":1040,"y":413},"right_eyebrow_upper_left_quarter":{"x":956,"y":423},"right_eyebrow_upper_middle":{"x":983,"y":409},"right_eyebrow_upper_right_quarter":{"x":1012,"y":404}},"attributes":{"gender":{"value":"Male"},"age":{"value":27},"beauty":{"male_score":65.213,"female_score":69.013}}}],"image_id":"Q8ki20PR04ig95wz6kv1XQ==","face_num":1}

また、パラメータによってはvalueが取得出来ました。例えば「request_id」や「image_id」は取得出来ます。しかし、valueが波括弧のパラメータを取得しようとすると、undifinedが返ってきます。なので、「beauty」や「age」などのパラメータは取得出来ません。

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

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

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

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

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

guest

回答2

0

##JSON.parse()

const json = '{"result":true, "count":42}';
const obj = JSON.parse(json);
console.log(obj.count);

投稿2020/01/24 07:43

mmaeda

総合スコア269

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

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

0

自己解決

JSONのネスト構造が深く、それを見落としていたのが原因でした。。。初歩的な勘違いです。。。
JSONのネスト構造を確認出来る関数があるので、それを使うとよいみたいですね、いやほんと初歩的なまちがい、、、

投稿2020/01/26 14:39

chiba_kun

総合スコア16

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問