使用任何 lodash 获取嵌套 JSON 对象的所有值
Get all values of a nested JSON object using any lodash
场景:我有一个变量JSON
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
};
我需要获取 order.orderdetails.a1
的所有值的数组,如
['b1', 'b2', 'b3']
您可以尝试这样的操作:
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
}
var result = {};
// Loop over props of "order"
for (var order in json.order){
// Each prop is array. Loop over them
json.order[order].forEach(function(item) {
// Loop over each object's prop
for (var key in item) {
// Check if result has a prop with key. If not initialize it.
if (!result[key])
result[key] = [];
// Push vaues to necessary array
result[key].push(item[key]);
}
})
};
console.log(result);
您可以使用此代码执行此操作。
var json={
"order": {
"orderDetails": [
{
"a1": "b1",
"c1": "d1",
"e1": "f1"
},
{
"a1": "b2",
"c1": "d2",
"e1": "f2"
},
{
"a1": "b3",
"c1": "d3",
"e1": "f3"
}
],
"orderHeader": [
{
"a2": "b1",
"c2": "d1",
"e2": "f1"
},
{
"a2": "b2",
"c2": "d2",
"e2": "f2"
}
]
}
}
var a1 = json.order.orderDetails.map(function(obj){ return obj.a1 });
console.log(a1);
既然你已经 underscore.js, lodash 包括在内,为什么不利用它们而不是重新发明轮子。
single-line 使用 _.map
怎么样? _.map
也接受字符串作为 iteratee 并将 return 来自传递对象的那个键的值。
_.map(json.order.orderDetails, 'a1')
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
};
var result = _.map(json.order.orderDetails, 'a1');
console.log(result);
document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4); // For Demo: Showing the result on the screen
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.js"></script>
<pre id="result"></pre>
这类似于旧版本 lodash 中的 _.pluck
。
_.pluck(json.order.orderDetails, 'a1')
在纯 JavaScript 中使用 Array#map
可以获得相同的结果
json.order.orderDetails.map(e => e.a1)
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
};
var result = json.order.orderDetails.map(e => e.a1);
console.log(result);
document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4);
<pre id="result"></pre>
场景:我有一个变量JSON
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
};
我需要获取 order.orderdetails.a1
的所有值的数组,如
['b1', 'b2', 'b3']
您可以尝试这样的操作:
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
}
var result = {};
// Loop over props of "order"
for (var order in json.order){
// Each prop is array. Loop over them
json.order[order].forEach(function(item) {
// Loop over each object's prop
for (var key in item) {
// Check if result has a prop with key. If not initialize it.
if (!result[key])
result[key] = [];
// Push vaues to necessary array
result[key].push(item[key]);
}
})
};
console.log(result);
您可以使用此代码执行此操作。
var json={
"order": {
"orderDetails": [
{
"a1": "b1",
"c1": "d1",
"e1": "f1"
},
{
"a1": "b2",
"c1": "d2",
"e1": "f2"
},
{
"a1": "b3",
"c1": "d3",
"e1": "f3"
}
],
"orderHeader": [
{
"a2": "b1",
"c2": "d1",
"e2": "f1"
},
{
"a2": "b2",
"c2": "d2",
"e2": "f2"
}
]
}
}
var a1 = json.order.orderDetails.map(function(obj){ return obj.a1 });
console.log(a1);
既然你已经 underscore.js, lodash 包括在内,为什么不利用它们而不是重新发明轮子。
single-line 使用 _.map
怎么样? _.map
也接受字符串作为 iteratee 并将 return 来自传递对象的那个键的值。
_.map(json.order.orderDetails, 'a1')
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
};
var result = _.map(json.order.orderDetails, 'a1');
console.log(result);
document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4); // For Demo: Showing the result on the screen
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.0.0/lodash.js"></script>
<pre id="result"></pre>
这类似于旧版本 lodash 中的 _.pluck
。
_.pluck(json.order.orderDetails, 'a1')
在纯 JavaScript 中使用 Array#map
json.order.orderDetails.map(e => e.a1)
var json = {
"order": {
"orderDetails": [{
"a1": "b1",
"c1": "d1",
"e1": "f1"
}, {
"a1": "b2",
"c1": "d2",
"e1": "f2"
}, {
"a1": "b3",
"c1": "d3",
"e1": "f3"
}],
"orderHeader": [{
"a2": "b1",
"c2": "d1",
"e2": "f1"
}, {
"a2": "b2",
"c2": "d2",
"e2": "f2"
}]
}
};
var result = json.order.orderDetails.map(e => e.a1);
console.log(result);
document.getElementById('result').innerHTML = JSON.stringify(result, 0, 4);
<pre id="result"></pre>