如何访问和处理嵌套对象、数组或JSON?

我有一个包含对象和数组的嵌套数据结构。我如何提取信息，即访问一个特定的或多个值(或键)?

例如:

var data = {
    code: 42,
    items: [{
        id: 1,
        name: 'foo'
    }, {
        id: 2,
        name: 'bar'
    }]
};

我如何访问项目中的第二个项目的名称?

当前回答

如果您试图在JSON字符串中查找路径，可以将数据转储到https://jsonpathfinder.com并单击GUI元素。它将生成元素路径的JS语法。

除此之外，对于您可能想要迭代的任何数组，用循环替换相关的数组偏移下标，如[0]。

这里有一个简单版本的工具，你可以在这里或在https://ggorlen.github.io/json-dive/上运行。单击要将路径复制到剪贴板的节点。

/* code minified to make the tool easier to run without having to scroll */ let bracketsOnly=!1,lastHighlighted={style:{}};const keyToStr=t=>!bracketsOnly&&/^[a-zA-Z_$][a-zA-Z$_\d]*$/.test(t)?`.${toHTML(t)}`:`["${toHTML(t)}"]`,pathToData=t=>`data-path="data${t.join("")}"`,htmlSpecialChars={"&":"&","<":"<",">":">",'"':""","'":"'","\t":"\\t","\r":"\\r","\n":"\\n"," ":" "},toHTML=t=>(""+t).replace(/[&<>"'\t\r\n ]/g,t=>htmlSpecialChars[t]),makeArray=(t,e)=>`\n [<ul ${pathToData(e)}>\n ${t.map((t,a)=>{e.push(`[${a}]`);const n=`<li ${pathToData(e)}>\n ${pathify(t,e).trim()},\n </li>`;return e.pop(),n}).join("")}\n </ul>]\n`,makeObj=(t,e)=>`\n {<ul ${pathToData(e)}>\n ${Object.entries(t).map(([t,a])=>{e.push(keyToStr(t));const n=`<li ${pathToData(e)}>\n "${toHTML(t)}": ${pathify(a,e).trim()},\n </li>`;return e.pop(),n}).join("")}\n </ul>}\n`,pathify=(t,e=[])=>Array.isArray(t)?makeArray(t,e):"object"==typeof t&&t!=null?makeObj(t,e):toHTML("string"==typeof t?`"${t}"`:t),defaultJSON='{\n "corge": "test JSON... \\n asdf\\t asdf",\n "foo-bar": [\n {"id": 42},\n [42, {"foo": {"baz": {"ba r<>!\\t": true, "4quux": "garply"}}}]\n ]\n}',$=document.querySelector.bind(document),$$=document.querySelectorAll.bind(document),resultEl=$("#result"),pathEl=$("#path"),tryToJSON=t=>{try{resultEl.innerHTML=pathify(JSON.parse(t)),$("#error").innerText=""}catch(t){resultEl.innerHTML="",$("#error").innerText=t}},copyToClipboard=t=>{const e=document.createElement("textarea");e.textContent=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e)},flashAlert=(t,e=2e3)=>{const a=document.createElement("div");a.textContent=t,a.classList.add("alert"),document.body.appendChild(a),setTimeout(()=>a.remove(),e)},handleClick=t=>{t.stopPropagation(),copyToClipboard(t.target.dataset.path),flashAlert("copied!"),$("#path-out").textContent=t.target.dataset.path},handleMouseOut=t=>{lastHighlighted.style.background="transparent",pathEl.style.display="none"},handleMouseOver=t=>{pathEl.textContent=t.target.dataset.path,pathEl.style.left=`${t.pageX+30}px`,pathEl.style.top=`${t.pageY}px`,pathEl.style.display="block",lastHighlighted.style.background="transparent",(lastHighlighted=t.target.closest("li")).style.background="#0ff"},handleNewJSON=t=>{tryToJSON(t.target.value),[...$$("#result *")].forEach(t=>{t.addEventListener("click",handleClick),t.addEventListener("mouseout",handleMouseOut),t.addEventListener("mouseover",handleMouseOver)})};$("textarea").addEventListener("change",handleNewJSON),$("textarea").addEventListener("keyup",handleNewJSON),$("textarea").value=defaultJSON,$("#brackets").addEventListener("change",t=>{bracketsOnly=!bracketsOnly,handleNewJSON({target:{value:$("textarea").value}})}),handleNewJSON({target:{value:defaultJSON}}); /**/ *{box-sizing:border-box;font-family:monospace;margin:0;padding:0}html{height:100%}#path-out{background-color:#0f0;padding:.3em}body{margin:0;height:100%;position:relative;background:#f8f8f8}textarea{width:100%;height:110px;resize:vertical}#opts{background:#e8e8e8;padding:.3em}#opts label{padding:.3em}#path{background:#000;transition:all 50ms;color:#fff;padding:.2em;position:absolute;display:none}#error{margin:.5em;color:red}#result ul{list-style:none}#result li{cursor:pointer;border-left:1em solid transparent}#result li:hover{border-color:#ff0}.alert{background:#f0f;padding:.2em;position:fixed;bottom:10px;right:10px}  <div class="wrapper"><textarea></textarea><div id="opts"><label>brackets only: <input id="brackets"type="checkbox"></label></div><div id="path-out">click a node to copy path to clipboard</div><div id="path"></div><div id="result"></div><div id="error"></div></div>

Unminified(也可以在GitHub上找到):

这并不是为了代替学习如何钓鱼，但一旦你知道了，可以节省时间。

2021-07-20 19:22:48

其他回答

动态方法

在下面的deep(data,key)函数中，您可以使用任意键字符串-在您的情况下，items[1].name(您可以在任何级别使用数组符号[i]) -如果key无效，则返回undefined。

让深= (o, k) = > k.split (' . ') .reduce ((a、c、i) = > { 让m = c.match (/(.*?)\[(\ d *) \] /); 如果(m && a!=null && a[m[1]]!=null) return a[m[1]][+m[2]]; 返回a==null ?答:[c]; }, o); / /测试 Let key = 'items[1].name' //任意深键 Let data = { 42岁的代码: 名称:项目:[{id: 11日“foo”},{id: 22岁的名字:“酒吧”},) }; Console.log (key，'='， deep(data,key));

2019-06-26 05:01:17

如果你愿意包含一个库，使用JSONPath将是最灵活的解决方案之一: https://github.com/s3u/JSONPath(节点和浏览器)

对于你的用例，json路径是:

$..items[1].name

so:

var secondName = jsonPath.eval(data, "$..items[1].name");

2014-06-26 12:43:46

动态访问多级对象。

var obj = {
  name: "john doe",
  subobj: {
    subsubobj: {
      names: "I am sub sub obj"
    }
  }
};

var level = "subobj.subsubobj.names";
level = level.split(".");

var currentObjState = obj;

for (var i = 0; i < level.length; i++) {
  currentObjState = currentObjState[level[i]];
}

console.log(currentObjState);

工作提琴:https://jsfiddle.net/andreitodorut/3mws3kjL/

2018-01-25 10:24:48

这个问题很老了，所以作为当代的更新。随着ES2015的开始，有了其他方法来获取你需要的数据。现在有一个被称为对象解构的特性，用于访问嵌套对象。

Const data = { 42岁的代码: 项目:[{ id: 1、名称:“foo” }, { id: 2 名称:“酒吧” }) }; const { 项目:[，{ 名称:secondName }) } =数据; console.log (secondName);

上面的例子从名为items的数组的name键创建了一个名为secondName的变量，该数组表示跳过数组中的第一个对象。

值得注意的是，对于这个例子来说，它可能有点过头了，因为简单的数组访问更容易阅读，但在一般情况下，它在分解对象时很有用。

这是对您的特定用例的非常简短的介绍，解构可能是一种不寻常的语法，首先要习惯。我建议阅读Mozilla的解构赋值文档来了解更多信息。

2016-05-06 10:45:38

我不认为提问只关心一个层次的嵌套对象，所以我提出下面的演示来演示如何访问深嵌套json对象的节点。好的，让我们找到id为5的节点。

2017-02-22 09:00:32

如何访问和处理嵌套对象、数组或JSON?

推荐文章

最新文章

标签