访问嵌入式JSON的深层对象成员 [英] Access deep object member of embeded JSON

问题描述

以下功能在用点号表示的字符串检索深对象键值方面做得非常出色:

The following function does an amazing job of retrieving a deep object key value with a dot notated string:

function getPathValue(obj, path) {
  return new Function('_', 'return _.' + path)(obj);
}

例如，它使用以下作为路径参数返回键"bar"之类的值:

For example, it returns the value for a key like "bar" using the following as the path argument:

'data.abc.foo.bar'

但是，某些API将附加的字符串化JSON打包为一些键值.

However, some API's pack additional stringified JSON into some key values.

我正在寻求对上述功能的增强，以处理这种情况.

I'm looking for an enhancement to the above function that will handle that case.

例如，Stack自己的WebSocket服务:

For example, Stack's own WebSocket service:

wss://qa.sockets.stackexchange.com/

返回这样的字符串:

{"action":"155-questions-active","data":"{\"siteBaseHostAddress\":\"stackoverflow.com\",\"id\":53819390,\"titleEncodedFancy\":\"Should I start with webGL1 or webGL2 when using Three.js\",\"bodySummary\":\"Spent some time learning and understanding the basics of webGL and I'm now diving into Three.js.\\n\\nI noticed that I have the option of using webGL1 or webGL2. Seems as if webGL1 is the default, however ...\",\"tags\":[\"three.js\",\"webgl\"],\"lastActivityDate\":1545064508,\"url\":\"https://stackoverflow.com/questions/53819390/should-i-start-with-webgl1-or-webgl2-when-using-three-js\",\"ownerUrl\":\"https://stackoverflow.com/users/8226111/romanrogers\",\"ownerDisplayName\":\"romanrogers\",\"apiSiteParameter\":\"stackoverflow\"}"}

而且我希望能够使用上面的函数通过输入字符串来检索值，例如:

And I'd like to be able to use the above function to retrieve values with an input string like:

'data.bodySummary'

也许输入字符串可能类似于:

Perhaps the input string could look something like:

'data/bodySummary'

其中的固线(/)代表一个JSON.parse().

where the solidus (/slash) represents a JSON.parse().

请注意，这需要动态，因为我希望最终用户可以选择任意键以返回通常的值.

Note, this needs to be dynamic as I'd like to make it where the end user can select arbitrary keys to return values for in the general case.

推荐答案

您可以检查获取属性的项目是否为字符串，然后执行解析.返回属性的值.

You could check if the item from where you take a property is a string an perform a parsing. The return the value of the property.

function getValue(object, path) {
    return path
        .split('.')
        .reduce((o, k) => (typeof o === 'string' ? JSON.parse(o) : o)[k], object);
}

var data = {"action":"155-questions-active","data":"{\"siteBaseHostAddress\":\"stackoverflow.com\",\"id\":53819390,\"titleEncodedFancy\":\"Should I start with webGL1 or webGL2 when using Three.js\",\"bodySummary\":\"Spent some time learning and understanding the basics of webGL and I'm now diving into Three.js.\\n\\nI noticed that I have the option of using webGL1 or webGL2. Seems as if webGL1 is the default, however ...\",\"tags\":[\"three.js\",\"webgl\"],\"lastActivityDate\":1545064508,\"url\":\"https://stackoverflow.com/questions/53819390/should-i-start-with-webgl1-or-webgl2-when-using-three-js\",\"ownerUrl\":\"https://stackoverflow.com/users/8226111/romanrogers\",\"ownerDisplayName\":\"romanrogers\",\"apiSiteParameter\":\"stackoverflow\"}"};

console.log(getValue(data, 'data.bodySummary'));

ES5

function getValue(object, path) {
    return path
        .split('.')
        .reduce(function (o, k) {
            return (typeof o === 'string' ? JSON.parse(o) : o)[k];
        }, object);
}

var data = {"action":"155-questions-active","data":"{\"siteBaseHostAddress\":\"stackoverflow.com\",\"id\":53819390,\"titleEncodedFancy\":\"Should I start with webGL1 or webGL2 when using Three.js\",\"bodySummary\":\"Spent some time learning and understanding the basics of webGL and I'm now diving into Three.js.\\n\\nI noticed that I have the option of using webGL1 or webGL2. Seems as if webGL1 is the default, however ...\",\"tags\":[\"three.js\",\"webgl\"],\"lastActivityDate\":1545064508,\"url\":\"https://stackoverflow.com/questions/53819390/should-i-start-with-webgl1-or-webgl2-when-using-three-js\",\"ownerUrl\":\"https://stackoverflow.com/users/8226111/romanrogers\",\"ownerDisplayName\":\"romanrogers\",\"apiSiteParameter\":\"stackoverflow\"}"};

console.log(getValue(data, 'data.bodySummary'));

这篇关于访问嵌入式JSON的深层对象成员的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！