Lodash在嵌套数组中选择 [英] lodash pick in nested array
问题描述
我有一个这样的对象数组:
I have an array of objects like this:
{
"sizes":{
"thumbnail":{
"height":300,
"width":300,
"url":"http://example.com/wp-content/uploads/2017/04/web-300x300.jpg",
"orientation":"landscape"
},
"medium":{
"height":267,
"width":400,
"url":"http://example.com/wp-content/uploads/2017/04/web-400x267.jpg",
"orientation":"landscape"
},
"large":{
"height":441,
"width":660,
"url":"http://example.com/wp-content/uploads/2017/04/web-1024x684.jpg",
"orientation":"landscape"
},
"full":{
"url":"http://example.com/wp-content/uploads/2017/04/web.jpg",
"height":1200,
"width":1796,
"orientation":"landscape"
}
},
"mime":"image/jpeg",
"type":"image",
"subtype":"jpeg",
"id":3589,
"url":"http://example.com/wp-content/uploads/2017/04/web.jpg",
"alt":"",
"link":"http://example.com/web/",
"caption":""
}
我正在使用以下代码段仅使用 alt
,标题
, id
和 url
数组中的键:
I'm using the following snippet to create a new array with just the alt
, caption
, id
and url
keys in the array:
images.map( ( image ) => pick( image, [ 'alt', 'caption', 'id', 'url' ] ) ),
我的问题是,如何选择 sizes.thumbnail.url
键而不是根 url
键?是否可以?如果可以,怎么办?
My question is, how can I pick the sizes.thumbnail.url
key instead of the root url
key? Is it possible? If so, how?
预先感谢
推荐答案
使用 _.get()
,并将其与 _的结果合并.pick()
.
Create an object with the url property and the value of sizes.thumbnail.url
using _.get()
, and combine it with to the results of the _.pick()
.
注意::我已经使用对象传播以合并结果,但是您可以使用
Note: I've used object spread to merge the results, but you can use Object.assign()
or lodash's equivalent instead.
const images = [{"sizes":{"thumbnail":{"height":300,"width":300,"url":"http://example.com/wp-content/uploads/2017/04/web-300x300.jpg","orientation":"landscape"},"medium":{"height":267,"width":400,"url":"http://example.com/wp-content/uploads/2017/04/web-400x267.jpg","orientation":"landscape"},"large":{"height":441,"width":660,"url":"http://example.com/wp-content/uploads/2017/04/web-1024x684.jpg","orientation":"landscape"},"full":{"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","height":1200,"width":1796,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":3589,"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","alt":"","link":"http://example.com/web/","caption":""}];
const result = images.map((image) => ({
..._.pick(image, ['alt', 'caption', 'id']),
url: _.get(image, 'sizes.thumbnail.url')
}));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
更通用的解决方案是一个函数,该函数接受路径列表,并生成成对的数组[路径的最后一部分,值].该函数使用 _.fromPairs()
(或 Object.fromEntries()
):
A more generic solution would a function that accepts a list of paths, and generate an array of pairs [last part of path, value]. The function converts the pairs to an object using _.fromPairs()
(or Object.fromEntries()
):
const deepPick = (paths, obj) =>
_.fromPairs(paths.map(p => [
_.last(p.split('.')),
_.get(obj, p),
]))
const images = [{"sizes":{"thumbnail":{"height":300,"width":300,"url":"http://example.com/wp-content/uploads/2017/04/web-300x300.jpg","orientation":"landscape"},"medium":{"height":267,"width":400,"url":"http://example.com/wp-content/uploads/2017/04/web-400x267.jpg","orientation":"landscape"},"large":{"height":441,"width":660,"url":"http://example.com/wp-content/uploads/2017/04/web-1024x684.jpg","orientation":"landscape"},"full":{"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","height":1200,"width":1796,"orientation":"landscape"}},"mime":"image/jpeg","type":"image","subtype":"jpeg","id":3589,"url":"http://example.com/wp-content/uploads/2017/04/web.jpg","alt":"","link":"http://example.com/web/","caption":""}];
const result = images.map(image => deepPick(
['alt', 'caption', 'id', 'sizes.thumbnail.url'],
image
));
console.log(result);
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
这篇关于Lodash在嵌套数组中选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!