Question

我正在开发一个系统并尝试从Google Cloud Vision API生成的JSON中获取特定数据，并希望在html上显示关键字。您可以看到嵌套的JSON（数据）如下所示。在解密时，我想表明＆＃34; dog＆＃34;在我的HTML中。

＆＃13;

{
  "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
        }
      ]
    }
  ]
}

＆＃13;

我写了以下javascript代码，但仍然是＆＃34; undefined＆＃34;回答那个

document.getElementById（＆＃34; demo＆＃34;）。innerHTML = data.responses;

fyi，

数据

是JSON（Google vision API）的总体结果。非常感谢您的大力帮助！

Answer 1

要只获得一个与“dog”匹配的结果，您可以使用Array.prototype.find()

要获得包含单词“dog”的多个结果，您可以使用Array.prototype.filter()结合String.prototype.match()和new RegExp(pattern[, flags])

{'created_at': 'Sat Dec 23 03:51:46 +0000 2017', 'id': 944415209413754880, 'id_str': '944415209413754880', 'text': 'RT @IanD', 'truncated': False, 'entities': {'hashtags': [], 'symbols': [], 'user_mentions': [{'screen_name': 'Prof_IanD', 'name': 'Ian Davis', 'id': 748348755766702081, 'id_str': '748348755766702081', 'indices': [3, 13]}], 'urls': []}, 'source': '<a href="http://twitter.com/download/iphone" rel="nofollow">Twitter for iPhone</a>', 'in_reply_to_status_id': None, 'in_reply_to_status_id_str': None, 'in_reply_to_user_id': None, 'in_reply_to_user_id_str': None, 'in_reply_to_screen_name': None, 'user': {'id': 4761682514, 'id_str': '4761682514', 'name': '', 'screen_name': '', 'location': 'Salt Lake City, UT', 'description': "", 'url': '', 'entities': {'url': {'urls': [{'url': '', 'expanded_url': '', 'display_url': '', 'indices': [0, 23]}]}, 'description': {'urls': []}}, 'protected': False, 'followers_count': 1379, 'friends_count': 812, 'listed_count': 46, 'created_at': 'Fri Jan 15 06:32:10 +0000 2016', 'favourites_count': 799, 'utc_offset': None, 'time_zone': None, 'geo_enabled': True, 'verified': False, 'statuses_count': 2277, 'lang': 'en', 'contributors_enabled': False, 'is_translator': False, 'is_translation_enabled': False, 'profile_background_color': 'F5F8FA', 'profile_background_image_url': None, 'profile_background_image_url_https': None, 'profile_background_tile': False, 'profile_image_url': '', 'profile_image_url_https': '', 'profile_banner_url': '', 'profile_link_color': '1DA1F2', 'profile_sidebar_border_color': 'C0DEED', 'profile_sidebar_fill_color': 'DDEEF6', 'profile_text_color': '333333', 'profile_use_background_image': True, 'has_extended_profile': False, 'default_profile': True, 'default_profile_image': False, 'following': False, 'follow_request_sent': False, 'notifications': False, 'translator_type': 'none'}, 'geo': None, 'coordinates': None, 'place': None, 'contributors': None, 'retweeted_status': {'created_at': 'Fri Dec 22 20:22:34 +0000 2017', 'id': 944302164544913408, 'id_str': '944302164544913408', 'text': '', 'truncated': True, 'entities': {'hashtags': [], 'symbols': [], 'user_mentions': [], 'urls': [{'url': '', 'expanded_url': '', 'display_url': '', 'indices': [117, 140]}]}, 'source': '<a href="http://twitter.com/#!/download/ipad" rel="nofollow">Twitter for iPad</a>', 'in_reply_to_status_id': None, 'in_reply_to_status_id_str': None, 'in_reply_to_user_id': None, 'in_reply_to_user_id_str': None, 'in_reply_to_screen_name': None, 'user': {'id': 748348755766702081, 'id_str': '748348755766702081', 'name': 'Ian Davis', 'screen_name': 'Prof_IanD', 'location': 'Melbourne, Australia', 'description': '', 'url': None, 'entities': {'description': {'urls': []}}, 'protected': False, 'followers_count': 573, 'friends_count': 264, 'listed_count': 17, 'created_at': 'Thu Jun 30 02:53:41 +0000 2016', 'favourites_count': 1197, 'utc_offset': 39600, 'time_zone': 'Melbourne', 'geo_enabled': True, 'verified': False, 'statuses_count': 1813, 'lang': 'en', 'contributors_enabled': False, 'is_translator': False, 'is_translation_enabled': False, 'profile_background_color': 'F5F8FA', 'profile_background_image_url': None, 'profile_background_image_url_https': None, 'profile_background_tile': False, 'profile_image_url': '', 'profile_image_url_https': '', 'profile_banner_url': 'https://pbs.twimg.com/profile_banners/748348755766702081/1467417750', 'profile_link_color': '1DA1F2', 'profile_sidebar_border_color': 'C0DEED', 'profile_sidebar_fill_color': 'DDEEF6', 'profile_text_color': '333333', 'profile_use_background_image': True, 'has_extended_profile': False, 'default_profile': True, 'default_profile_image': False, 'following': False, 'follow_request_sent': False, 'notifications': False, 'translator_type': 'none'}, 'geo': None, 'coordinates': None, 'place': None, 'contributors': None, 'is_quote_status': True, 'quoted_status_id': 944284512371990528, 'quoted_status_id_str': '944284512371990528', 'quoted_status': {'created_at': 'Fri Dec 22 19:12:26 +0000 2017', 'id': 944284512371990528, 'id_str': '944284512371990528', 'text': '', 'truncated': True, 'entities': {'hashtags': [], 'symbols': [], 'user_mentions': [{'screen_name': '', 'name': '', 'id': 4761682514, 'id_str': '4761682514', 'indices': [53, 65]}], 'urls': [{'url': '', 'expanded_url': 'https://twitter.com/i/web/status/944284512371990528', 'display_url': 'twitter.com/i/web/status/9…', 'indices': [117, 140]}]}, 'source': '<a href="http://twitter.com/download/iphone" rel="nofollow">Twitter for iPhone</a>', 'in_reply_to_status_id': None, 'in_reply_to_status_id_str': None, 'in_reply_to_user_id': None, 'in_reply_to_user_id_str': None, 'in_reply_to_screen_name': None, 'user': {'id': 24660850, 'id_str': '24660850', 'name': '', 'screen_name': '', 'location': 'Los Angeles, CA ', 'description': '', 'url': '', 'entities': {'url': {'urls': [{'url': '', 'expanded_url': '', 'display_url': '', 'indices': [0, 23]}]}, 'description': {'urls': [{'url': '', 'expanded_url': '', 'display_url': '', 'indices': [122, 145]}]}}, 'protected': False, 'followers_count': 2624, 'friends_count': 937, 'listed_count': 89, 'created_at': 'Mon Mar 16 06:46:19 +0000 2009', 'favourites_count': 2741, 'utc_offset': -28800, 'time_zone': 'Pacific Time (US & Canada)', 'geo_enabled': True, 'verified': False, 'statuses_count': 3755, 'lang': 'en', 'contributors_enabled': False, 'is_translator': False, 'is_translation_enabled': False, 'profile_background_color': 'C6E2EE', 'profile_background_image_url': 'http://abs.twimg.com/images/themes/theme2/bg.gif', 'profile_background_image_url_https': 'https://abs.twimg.com/images/themes/theme2/bg.gif', 'profile_background_tile': False, 'profile_image_url': 'http://pbs.twimg.com/profile_images/98109473/twitter_normal.jpg', 'profile_image_url_https': 'https://pbs.twimg.com/profile_images/98109473/twitter_normal.jpg', 'profile_banner_url': 'https://pbs.twimg.com/profile_banners/24660850/1444348252', 'profile_link_color': '1F98C7', 'profile_sidebar_border_color': 'C6E2EE', 'profile_sidebar_fill_color': 'DAECF4', 'profile_text_color': '663B12', 'profile_use_background_image': True, 'has_extended_profile': False, 'default_profile': False, 'default_profile_image': False, 'following': False, 'follow_request_sent': False, 'notifications': False, 'translator_type': 'none'}, 'geo': None, 'coordinates': None, 'place': {'id': 'ddf8317a51899bd8', 'url': 'https://api.twitter.com/1.1/geo/id/ddf8317a51899bd8.json', 'place_type': 'city', 'name': 'Duarte', 'full_name': 'Duarte, CA', 'country_code': 'US', 'country': 'United States', 'contained_within': [], 'bounding_box': {'type': 'Polygon', 'coordinates': [[[-117.9906137, 34.1182559], [-117.9297178, 34.1182559], [-117.9297178, 34.165263], [-117.9906137, 34.165263]]]}, 'attributes': {}}, 'contributors': None, 'is_quote_status': True, 'quoted_status_id': 944262989942734848, 'quoted_status_id_str': '944262989942734848', 'retweet_count': 11, 'favorite_count': 49, 'favorited': False, 'retweeted': False, 'possibly_sensitive': False, 'lang': 'en'}, 'retweet_count': 6, 'favorite_count': 13, 'favorited': False, 'retweeted': False, 'possibly_sensitive': False, 'lang': 'en'}, 'is_quote_status': True, 'quoted_status_id': 944284512371990528, 'quoted_status_id_str': '944284512371990528', 'retweet_count': 6, 'favorite_count': 0, 'favorited': False, 'retweeted': False, 'lang': 'en'}

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(', ');

如何从Google Cloud Vision API生成的嵌套JSON中获取特定数据

1 个答案: