javascript - 如何解析 JS 中的字符串，这是 google location api 的结果？-6ren

javascript - 如何解析 JS 中的字符串，这是 google location api 的结果？

转载作者：太空宇宙更新时间：2023-11-04 15:54:08

这是ajax请求的结果:

console.log(locations.output);
/*
{
   "predictions" : [
      {
         "description" : "Tehran Province, Iran",
         "id" : "4c45c924b261e2bb262360fb5a25d4b9a94088a7",
         "matched_substrings" : [
            {
               "length" : 6,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJf5Us9YQBjj8R0OohvHQms1U",
         "reference" : "CjQtAAAA6j_9DtMr30DQ9h8dzemfD2NaWEWBgf5yFlQ92XW4EZvHXqZ8Ob6wGkedetO1xNiZEhCGeIk7jBXCQP_ad4V0R-YeGhSIcGtxcxPh-G4e2DMT97Be4xdfkg",
         "structured_formatting" : {
            "main_text" : "Tehran Province",
            "main_text_matched_substrings" : [
               {
                  "length" : 6,
                  "offset" : 0
               }
            ],
            "secondary_text" : "Iran"
         },
         "terms" : [
            {
               "offset" : 0,
               "value" : "Tehran Province"
            },
            {
               "offset" : 17,
               "value" : "Iran"
            }
         ],
         "types" : [ "administrative_area_level_1", "political", "geocode" ]
      },
      {
         "description" : "Tehran, Tehran Province, Iran",
         "id" : "14788d031b564588682273730e2e16d2617d3548",
         "matched_substrings" : [
            {
               "length" : 6,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJ2dzzH0kAjj8RvCRwVnxps_A",
         "reference" : "CkQ1AAAAGXsNCFct3XK9JukMD-C7D7j1f0b-Rk0uBZFULZ9TKziZVKz2HWeNWZ5xWU-aNIceYEioJRxHmYS_O7DhMW32YBIQzGS_zTt6aijJx_onRU9DTRoU-cPuoOF16KrzlFY_4EGlwVf1Izk",
         "structured_formatting" : {
            "main_text" : "Tehran",
            "main_text_matched_substrings" : [
               {
                  "length" : 6,
                  "offset" : 0
               }
            ],
            "secondary_text" : "Tehran Province, Iran"
         },
         "terms" : [
            {
               "offset" : 0,
               "value" : "Tehran"
            },
            {
               "offset" : 8,
               "value" : "Tehran Province"
            },
            {
               "offset" : 25,
               "value" : "Iran"
            }
         ],
         "types" : [ "locality", "political", "geocode" ]
      },
      {
         "description" : "Tehranpars, Tehran, Tehran Province, Iran",
         "id" : "09a979a1ac286c1ff2ee94c5d36258910d7f6ec6",
         "matched_substrings" : [
            {
               "length" : 6,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJX5PM9hwdjj8R6zn_mu5suoE",
         "reference" : "ClRBAAAACKbtLWiAm5kV0JzYtPOLhQTuMxlMMIXxPGRmuLUF7xuAlx7Mueo91OuJmB4mTwo3T0NhnNhamVDUsKFE0fNffkZi1Bv-ZQs1TcXLNx195C0SELOTSsOMn6pYeSnFMtvVqsIaFCxWipFk_wIxDKVoLi8Cd8g993cG",
         "structured_formatting" : {
            "main_text" : "Tehranpars",
            "main_text_matched_substrings" : [
               {
                  "length" : 6,
                  "offset" : 0
               }
            ],
            "secondary_text" : "Tehran, Tehran Province, Iran"
         },
         "terms" : [
            {
               "offset" : 0,
               "value" : "Tehranpars"
            },
            {
               "offset" : 12,
               "value" : "Tehran"
            },
            {
               "offset" : 20,
               "value" : "Tehran Province"
            },
            {
               "offset" : 37,
               "value" : "Iran"
            }
         ],
         "types" : [ "neighborhood", "political", "geocode" ]
      },
      {
         "description" : "Tehran Now, Tehran, Tehran Province, Iran",
         "id" : "1f7583f258e7e92f03b818ba10c48e20d2bd9f59",
         "matched_substrings" : [
            {
               "length" : 6,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJ61k7RLICjj8RnvjuZpbZeEM",
         "reference" : "ClRBAAAAydlnsS8Fjw9ibBXXX-XS4xuY4-7yEqMSZNTz66Q-4hRNnGdEGyOICqFbm4VQ4-ZV7O8fftoznes6-u-6sZyvz8Gp3N3hPLASFvtoWeJBPS8SEE8pPnxD20v8_NPnWLANDG8aFPfquA7RBNHvpEgiH5Q0eIqmtl5k",
         "structured_formatting" : {
            "main_text" : "Tehran Now",
            "main_text_matched_substrings" : [
               {
                  "length" : 6,
                  "offset" : 0
               }
            ],
            "secondary_text" : "Tehran, Tehran Province, Iran"
         },
         "terms" : [
            {
               "offset" : 0,
               "value" : "Tehran Now"
            },
            {
               "offset" : 12,
               "value" : "Tehran"
            },
            {
               "offset" : 20,
               "value" : "Tehran Province"
            },
            {
               "offset" : 37,
               "value" : "Iran"
            }
         ],
         "types" : [ "sublocality_level_1", "sublocality", "political", "geocode" ]
      },
      {
         "description" : "Tehran Bazaar, Tehran, Tehran Province, Iran",
         "id" : "7a97ba4c05dcb1b11c2153bd39673b6737aa5748",
         "matched_substrings" : [
            {
               "length" : 6,
               "offset" : 0
            }
         ],
         "place_id" : "ChIJJX5my-8Bjj8RfAUG71zqw8s",
         "reference" : "ClREAAAABs4mvt65BUJ7Z2arVA_cv7V0tdPJKoVy010IOFrlS-L6VfhrEmIQAuxTXVQhnAA19fjEtVbPag3lfb-UrsmnMROnzvXiffA7MKUvgASMwvwSEGx-aGYRXyP1Q9Bxr7HmMVIaFKaxQEb8tg4L7IlRIbITWpG4F5Mf",
         "structured_formatting" : {
            "main_text" : "Tehran Bazaar",
            "main_text_matched_substrings" : [
               {
                  "length" : 6,
                  "offset" : 0
               }
            ],
            "secondary_text" : "Tehran, Tehran Province, Iran"
         },
         "terms" : [
            {
               "offset" : 0,
               "value" : "Tehran Bazaar"
            },
            {
               "offset" : 15,
               "value" : "Tehran"
            },
            {
               "offset" : 23,
               "value" : "Tehran Province"
            },
            {
               "offset" : 40,
               "value" : "Iran"
            }
         ],
         "types" : [ "neighborhood", "political", "geocode" ]
      }
   ],
   "status" : "OK"
}

现在我需要制作一个结果的自动完成列表。我的意思是我需要做这样的事情:

<ul>
  <li>Tehran Province, Iran</li>
  <li>Tehran, Tehran Province, Iran</li>
  <li>Tehranpars, Tehran, Tehran Province, Iran</li>
  <li>Tehran Bazaar, Tehran, Tehran Province, Iran</li>
</ul>

但我不知道如何选择结果的description 值。这是我的代码:

var html = "<ul>";
$.each(locations.output, function (index, value) {
    console.log(value);
})
var html += "</ul>";

/*
"
p
r
e
d
.
.
.

如您所见，结果是很多单个字符。我怎样才能得到这些值？

最佳答案

为了从响应中获取 JavaScript 对象，您可以使用 JSON.parse() .此方法解析 JSON 字符串，构造字符串描述的 JavaScript 值或对象:

var response = JSON.parse(locations.output);

你可以像这样在你的代码中使用response:

// Mocking response variable for code example..
var response = {"predictions": [{"description": "Tehran Province, Iran","id": "4c45c924b261e2bb262360fb5a25d4b9a94088a7","matched_substrings": [{"length": 6,"offset": 0}],"place_id": "ChIJf5Us9YQBjj8R0OohvHQms1U","reference": "CjQtAAAA6j_9DtMr30DQ9h8dzemfD2NaWEWBgf5yFlQ92XW4EZvHXqZ8Ob6wGkedetO1xNiZEhCGeIk7jBXCQP_ad4V0R-YeGhSIcGtxcxPh-G4e2DMT97Be4xdfkg","structured_formatting": {"main_text": "Tehran Province","main_text_matched_substrings": [{"length": 6,"offset": 0}],"secondary_text": "Iran"},"terms": [{"offset": 0,"value": "Tehran Province"},{"offset": 17,"value": "Iran"}],"types": ["administrative_area_level_1", "political", "geocode"]},{"description": "Tehran, Tehran Province, Iran","id": "14788d031b564588682273730e2e16d2617d3548","matched_substrings": [{"length": 6,"offset": 0}],"place_id": "ChIJ2dzzH0kAjj8RvCRwVnxps_A","reference": "CkQ1AAAAGXsNCFct3XK9JukMD-C7D7j1f0b-Rk0uBZFULZ9TKziZVKz2HWeNWZ5xWU-aNIceYEioJRxHmYS_O7DhMW32YBIQzGS_zTt6aijJx_onRU9DTRoU-cPuoOF16KrzlFY_4EGlwVf1Izk","structured_formatting": {"main_text": "Tehran","main_text_matched_substrings": [{"length": 6,"offset": 0}],"secondary_text": "Tehran Province, Iran"},"terms": [{"offset": 0,"value": "Tehran"},{"offset": 8,"value": "Tehran Province"},{"offset": 25,"value": "Iran"}],"types": ["locality", "political", "geocode"]},{"description": "Tehranpars, Tehran, Tehran Province, Iran","id": "09a979a1ac286c1ff2ee94c5d36258910d7f6ec6","matched_substrings": [{"length": 6,"offset": 0}],"place_id": "ChIJX5PM9hwdjj8R6zn_mu5suoE","reference": "ClRBAAAACKbtLWiAm5kV0JzYtPOLhQTuMxlMMIXxPGRmuLUF7xuAlx7Mueo91OuJmB4mTwo3T0NhnNhamVDUsKFE0fNffkZi1Bv-ZQs1TcXLNx195C0SELOTSsOMn6pYeSnFMtvVqsIaFCxWipFk_wIxDKVoLi8Cd8g993cG","structured_formatting": {"main_text": "Tehranpars","main_text_matched_substrings": [{"length": 6,"offset": 0}],"secondary_text": "Tehran, Tehran Province, Iran"},"terms": [{"offset": 0,"value": "Tehranpars"},{"offset": 12,"value": "Tehran"},{"offset": 20,"value": "Tehran Province"},{"offset": 37,"value": "Iran"}],"types": ["neighborhood", "political", "geocode"]},{"description": "Tehran Now, Tehran, Tehran Province, Iran","id": "1f7583f258e7e92f03b818ba10c48e20d2bd9f59","matched_substrings": [{"length": 6,"offset": 0}],"place_id": "ChIJ61k7RLICjj8RnvjuZpbZeEM","reference": "ClRBAAAAydlnsS8Fjw9ibBXXX-XS4xuY4-7yEqMSZNTz66Q-4hRNnGdEGyOICqFbm4VQ4-ZV7O8fftoznes6-u-6sZyvz8Gp3N3hPLASFvtoWeJBPS8SEE8pPnxD20v8_NPnWLANDG8aFPfquA7RBNHvpEgiH5Q0eIqmtl5k","structured_formatting": {"main_text": "Tehran Now","main_text_matched_substrings": [{"length": 6,"offset": 0}],"secondary_text": "Tehran, Tehran Province, Iran"},"terms": [{"offset": 0,"value": "Tehran Now"},{"offset": 12,"value": "Tehran"},{"offset": 20,"value": "Tehran Province"},{"offset": 37,"value": "Iran"}],"types": ["sublocality_level_1", "sublocality", "political", "geocode"]},{"description": "Tehran Bazaar, Tehran, Tehran Province, Iran","id": "7a97ba4c05dcb1b11c2153bd39673b6737aa5748","matched_substrings": [{"length": 6,"offset": 0}],"place_id": "ChIJJX5my-8Bjj8RfAUG71zqw8s","reference": "ClREAAAABs4mvt65BUJ7Z2arVA_cv7V0tdPJKoVy010IOFrlS-L6VfhrEmIQAuxTXVQhnAA19fjEtVbPag3lfb-UrsmnMROnzvXiffA7MKUvgASMwvwSEGx-aGYRXyP1Q9Bxr7HmMVIaFKaxQEb8tg4L7IlRIbITWpG4F5Mf","structured_formatting": {"main_text": "Tehran Bazaar","main_text_matched_substrings": [{"length": 6,"offset": 0}],"secondary_text": "Tehran, Tehran Province, Iran"},"terms": [{"offset": 0,"value": "Tehran Bazaar"},{"offset": 15,"value": "Tehran"},{"offset": 23,"value": "Tehran Province"},{"offset": 40,"value": "Iran"}],"types": ["neighborhood", "political", "geocode"]}], "status": "OK"};
var html = '<ul>';

$.each(response.predictions, function (index, value) {
  html += '<li>' + value.description + '</li>';
});
html += '</ul>';

$('#output').html(html);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="output"></div>

关于javascript - 如何解析 JS 中的字符串，这是 google location api 的结果？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47310175/

文章推荐： javascript - 这个奇怪的 "script"在做什么？

文章推荐： jquery - 换头像功能

文章推荐： javascript - Jquery Slider 旋转但发生了一些奇怪的事情

文章推荐： c++ - 以下代码有什么问题？

javascript - 控制台错误 - 解析 AJAX JSON 解析
我一直在使用 AJAX 从我正在创建的网络服务中解析 JSON 数组时遇到问题。我的前端是一个简单的 ajax 和 jquery 组合，用于显示从我正在创建的网络服务返回的结果。尽管知道我的数据库查
xml - Json 解析 vs xml 解析？
很难说出这里要问什么。这个问题模棱两可、含糊不清、不完整、过于宽泛或夸夸其谈，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开，visit the help center . 关闭 1
android - java.lang.NoClassDefFoundError : com. 解析。解析
我在尝试运行 Android 应用程序时遇到问题并收到以下错误 java.lang.NoClassDefFoundError: com.parse.Parse 当我尝试运行该应用时。最佳答案在这
python - 解析 HTML 内容时防止 etree 解析 HTML 实体
有什么办法可以防止etree在解析HTML内容时解析HTML实体吗？ html = etree.HTML('&') html.find('.//body').text 这给了我 '&' 但我想
javascript - 使用 JSON 解析/解析 js 对象时，返回方法中的函数范围会丢失
我有一个有点疯狂的例子，但对于那些 JavaScript 函数作用域专家来说，它看起来是一个很好的练习: (function (global) { // our module number one
java - 使用 Java 解析 HTML 数据(DOM 解析)
关闭。此题需要details or clarity 。目前不接受答案。想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题. 已关闭 8 年前。 Improve th
php - 在服务器上用 PHP 解析 HTML 还是在最终用户端用 JavaScript 解析 HTML 会更好？
我需要编写一个脚本来获取链接并解析链接页面的 HTML 以提取标题和其他一些数据，例如可能是简短的描述，就像您链接到 Facebook 上的内容一样。当用户向站点添加链接时将调用它，因此在客户端启动
node.js - 为什么 npm 包从/AppData 解析，而不是从 local/node_modules 解析？
在 VS Code 中本地开发时，包解析为 C:/Users//AppData/Local/Microsoft/TypeScript/3.5/node_modules/@types//index而不是
php - 解析 json 错误 : SyntaxError: JSON. 解析:JSON 数据的第 1 行第 2 列出现意外字符
我在将 json 从 php 解析为 javascript 时遇到问题这是我的示例代码: //function MethodAjax = function (wsFile, param) {
php - 解析 json 错误 : SyntaxError: JSON. 解析:JSON 数据的第 1 行第 2 列出现意外字符
我在将 json 从 php 解析为 javascript 时遇到问题这是我的示例代码: //function MethodAjax = function (wsFile, param) {
解析，在哪里可以了解
我被赋予了将一种语言“翻译”成另一种语言的工作。对于使用正则表达式的简单逐行方法来说，源代码过于灵活(复杂)。我在哪里可以了解更多关于词法分析和解析器的信息？最佳答案如果你想对这个主题产生“情绪化
正则表达式 {} 解析
您好，我在解析此文本时遇到问题 { { { {[system1];1;1;0.612509325}; {[system2];1;
JavaScript 解析？
我正在为 adobe after effects 在 extendscript 中编写一些代码，最终变成了 javascript。我有一个数组，我想只搜索单词“assemble”并返回整个 jc3_
JavaScript 解析
我有这段代码: $(document).ready(function() { // }); 问题:FB_RequireFeatures block 外部的代码先于其内部的代码执行。因此 who
解析.netcore项目中IStartupFilter使用教程
背景： netcore项目中有些服务是在通过中间件来通信的，比如orleans组件。它里面服务和客户端会指定网关和端口，我们只需要开放客户端给外界，服务端关闭端口。相当于去掉host，这样省掉了些
解析:继承ViewGroup后的子类如何重写onMeasure方法
1.首先贴上我试验成功的代码复制代码代码如下: protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
Python如何对XML 解析
什么是 XML？ XML 指可扩展标记语言（eXtensible Markup Language），标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。你可以通过本站学习 X
解析:php调用MsSQL存储过程使用内置RETVAL获取过程中的return值
【PHP代码】复制代码代码如下: $stmt = mssql_init('P__Global_Test', $conn) or die("initialize sto
解析:清除SQL被注入恶意病毒代码的语句
在SQL查询分析器执行以下代码就可以了。复制代码代码如下: declare @t varchar(255),@c varchar(255) declare table_cursor curs
【JavaScript】前端算法题40道题+解析
前言最近练习了一些前端算法题，现在做个总结，以下题目都是个人写法，并不是标准答案，如有错误欢迎指出，有对某道题有新的想法的友友也可以在评论区发表想法，互相学习🤭 题目题目一: 二维数组中的

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何解析 JS 中的字符串，这是 google location api 的结果？