2017-12-29 7 views
1

システムを開発しており、Google Cloud Vision APIから生成された特定のデータを取得しようとしています。後に続くように、ネストされたJSON(データ)を見ることができます。解説では、私はHTMLで "犬"を見せたいと思います。 。私はjavascriptのコードが、そのGoogle Cloud Vision APIによって生成されたネストされたJSONから特定のデータを取得する方法

のため、まだ "未定義" の答えのdocument.getElementById( "デモ")innerHTMLの= data.responses次の書き込み

{ 
 
    "responses": [ 
 
    { 
 
     "labelAnnotations": [ 
 
     { 
 
      "mid": "/m/0kpmf", 
 
      "description": "dog breed", 
 
      "score": 0.9408917 
 
     }, 
 
     { 
 
      "mid": "/m/0bt9lr", 
 
      "description": "dog", 
 
      "score": 0.91643894 
 
     }, 
 
     { 
 
      "mid": "/m/01z5f", 
 
      "description": "dog like mammal", 
 
      "score": 0.86234033 
 
     }, 
 
     { 
 
      "mid": "/m/02kysw", 
 
      "description": "spaniel", 
 
      "score": 0.84150785 
 
     }, 
 
     { 
 
      "mid": "/m/02xl47d", 
 
      "description": "dog breed group", 
 
      "score": 0.83750784 
 
     }, 
 
     { 
 
      "mid": "/m/05mqq3", 
 
      "description": "snout", 
 
      "score": 0.7590523 
 
     }, 
 
     { 
 
      "mid": "/m/01p2lr", 
 
      "description": "american cocker spaniel", 
 
      "score": 0.7300941 
 
     }, 
 
     { 
 
      "mid": "/m/02wcn0z", 
 
      "description": "russian spaniel", 
 
      "score": 0.6928253 
 
     }, 
 
     { 
 
      "mid": "/m/03ht9m", 
 
      "description": "field spaniel", 
 
      "score": 0.6872984 
 
     }, 
 
     { 
 
      "mid": "/m/02wbgd", 
 
      "description": "english cocker spaniel", 
 
      "score": 0.65664136 
 
     } 
 
     ] 
 
    } 
 
    ] 
 
}

。 FYI

データ

JSON(GoogleのビジョンAPI)から全体的な結果です。 本当に大きな助けに感謝します!

+1

コンマで区切られたものか、あるいは「犬」という単語にマッチしたものだけですか? –

+1

'document.getElementById(" demo ")。innerHTML = data;'を使用すると、 "[Object]"という用語が出力されますか?データの取得に使用するAJAX呼び出しを表示できますか? – SaschaM78

+0

@YosvelQuinterご返信いただきありがとうございます! しかし、このjsonデータは、私がシステムにアップロードしたイメージに基づいて非常に様々な「説明」を持っています。私はそれが何であっても説明の情報を得たいと思います。言い換えれば、「犬」という言葉だけで指定されているわけではありません。そうだと思いますか? – alohomora

答えて

1

あなたはArray.prototype.find()

を使用することができますし、String.prototype.match()new RegExp(pattern[, flags])

const json = {"responses": [{"labelAnnotations": [{"mid": "/m/0kpmf","description": "dog breed","score": 0.9408917},{"mid": "/m/0bt9lr","description": "dog","score": 0.91643894},{"mid": "/m/01z5f","description": "dog like mammal","score": 0.86234033},{"mid": "/m/02kysw","description": "spaniel","score": 0.84150785},{"mid": "/m/02xl47d","description": "dog breed group","score": 0.83750784},{"mid": "/m/05mqq3","description": "snout","score": 0.7590523},{"mid": "/m/01p2lr","description": "american cocker spaniel","score": 0.7300941},{"mid": "/m/02wcn0z","description": "russian spaniel","score": 0.6928253},{"mid": "/m/03ht9m","description": "field spaniel","score": 0.6872984},{"mid": "/m/02wbgd","description": "english cocker spaniel","score": 0.65664136}]}]}; 
 

 
// seachString 
 
const searchString = 'dog'; 
 

 
// one 
 
document.getElementById('oneResult').innerHTML = json 
 
    .responses[0] 
 
    .labelAnnotations 
 
    .find(el => el.description === searchString) 
 
    .description; 
 

 
// multiple 
 
document.getElementById('multipleResult').innerHTML = json 
 
    .responses[0] 
 
    .labelAnnotations 
 
    .filter(el => el.description.match(new RegExp(searchString, 'i'))) 
 
    .map(el => el.description) 
 
    .join(', ');
<p><b>One result</b>: <span id="oneResult"></span></p> 
 

 
<p><b>Multiple results</b>: <span id="multipleResult"></span></p>
と組み合わせる Array.prototype.filter()を使用することができ、単語「犬」を含む複数の結果を得るために単語「犬」に一致する1つの結果だけを取得するには あなたは `のdocument.getElementById( "デモ")に表示する。innerHTML`単語 "犬" SEPARを持つすべて` object.description`を

関連する問題