使用map()、filter()和concatAll()函数提取Javascript数据
输出几乎正确,但我在展平嵌套的boxart数组时遇到问题 Javascript数据:使用map()、filter()和concatAll()函数提取Javascript数据,javascript,functional-programming,Javascript,Functional Programming,输出几乎正确,但我在展平嵌套的boxart数组时遇到问题 Javascript数据: var movieLists = { name: "Instant Queue", videos : [ { "id": 70111470, "title": "Die Hard", "boxarts": [ {width: 150, height:200, u
var movieLists = {
name: "Instant Queue",
videos : [
{
"id": 70111470,
"title": "Die Hard",
"boxarts": [
{width: 150, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard150.jpg"},
{width: 200, height:200, url:"http://cdn-0.nflximg.com/images/2891/DieHard200.jpg"}
],
"url": "http://api.netflix.com/catalog/titles/movies/70111470",
"rating": 4.0,
"bookmark": [{ id:432534, time:65876586 }]
},
{
"id": 654356453,
"title": ....,
}];
预期输出:(仅使用函数.map()
,.filter()
,.concatAll()
,返回id,标题,boxart:boxart图像尺寸为150x200的影片的url
// [
// {"id": 675465,"title": "Fracture","boxart":"http://cdn-0...." },
// {"id": 65432445,"title": "The Chamber","boxart":"http://cdn-0...." },
// {"id": 654356453,...}
// ];
电流输出:
// [ //boxart value is an array
// {"id": 675465,"title": "Fracture","boxart":["http://cdn-0...."]},
// {"id": 65432445,"title": "The Chamber","boxart":["http://cdn-0...."]},
// {"id": 654356453,...}
// ];
我的解决方案:
return movieLists.map(function (category) {
return category.videos.map(function (video) {
return {
id: video.id,
title: video.title,
boxart: video.boxarts.filter(function (boxartFeature) {
return boxartFeature.width === 150 && boxartFeature.height === 200;
})
.map(function (boxartProp) {
return boxartProp.url;
})
};
});
}).concatAll(); //Flattens nested array by 1 dimension (please see demo)
我知道我需要应用.concatAll()
函数来删除嵌套的boxart数组,但我似乎找不到该数组的位置
请单击
map
返回一个数组。您正在将map
的结果存储在boxart
属性中
如果不想在boxart
中存储数组,只需存储数组的第一个成员(索引0
):
//...
.map(function (boxartProp) {
return boxartProp.url;
})[0]
你非常接近。我认为这是一个针对可观察对象的练习。因为你正在研究RxJS,所以重要的是你不要使用索引-->[0]。在处理可观察对象时,没有索引的概念 理解这个问题的诀窍是仔细观察
concatAll()
正在做什么。它接受一个二维数组并返回一个平坦数组
[[1,2],[3,4]-->[1,2,3,4]
使用当前代码,您正在将boxartProp.url
映射到一个嵌套数组,但您的其他属性不是。您现在或多或少拥有的是:[1,2,3,[4]]
。您想要的是一个均匀嵌套的数组:[[1]、[2]、[3]、[4]
。之所以重要是因为concatAll()
希望每个成员都是子数组。如果您还没有看过,我建议您观看Jafar Husain的作品。他非常出色,在视频中从头开始实现了concatAll
你的目标只需稍加调整即可实现
return movieLists.map(function(category) {
return category.videos.map(function(video) {
return video.boxarts.filter(function(boxart) {
return boxart.width === 150;
}).map(function(boxart) {
return {id: video.id, title: video.title, boxart: boxart.url};
});
}).concatAll();
}).concatAll();
请注意,在上一个映射中,我们不只是映射boxart url,而是将视频数据也传入。这为我们提供了运行concatAll()
所需的均匀嵌套数组
我们必须调用concatAll()
两次的原因是,您的视频嵌套在演示中的类别中。第一次调用会展平电影,第二次调用会展平类别
这些都是一些很好的练习。祝你好运!就我个人而言,我会使用forEach()而不是map(),并将“正确的”boxart存储在局部变量中。记住map()返回一个数组。通过使用forEach,我们可以检查每个boxart并选择正确的一个。我喜欢这个解决方案,因为阅读您的代码的其他人更容易理解发生了什么。这还允许我们在链的末尾整齐地使用concatAll()
return movieLists.map(function(category){
return category.videos.map(function(vids){
var correctBoxSize = "No Proper Box Size Found";
vids.boxarts.forEach(function(boxes){
if (boxes.width === 150 && boxes.height === 200)
{correctBoxSize = boxes.url}
});
return {
"id": vids.id,
"title": vids.title,
"boxart": correctBoxSize
};
})
}).concatAll()
“我有这个JSON数据”——这是JavaScript,不是JSON。