chaining reduce() and map() Javascript

Question

I am trying to combine reduce() with map() to reduce multiple box art objects to a single value: the url of the largest box art.
It gives me the following error :

VM272:20 Uncaught TypeError: boxarts.reduce(...).map is not a function at <anonymous>:20:4

Not sure what exactly is wrong

const boxarts = [
  { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
  { width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
  { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
  { width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
]
let newReduce = boxarts.reduce(function(accumulator, currentValue) {
  if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
    return accumulator
  } else {
    return currentValue
  }
}).map(function(item) {
  return item.url
})

console.log(newReduce)

SOLUTION to the initial question. It returns the link as an array of object.

    const boxarts = [{
    width: 600,
    height: 700,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture600.jpg"
  },
  {
    width: 500,
    height: 500,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture500.jpg"
  },
  {
    width: 425,
    height: 150,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"
  },
  {
    width: 200,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"
  }
]

let newReduce = [boxarts.reduce(function(acc, currentValue) {

  if (acc.width * acc.height > currentValue.width * currentValue.height) {
    return acc
  } else {
    return currentValue
  }
})].map(function(item) {
  return {
      url:item.url}
})



console.log(newReduce)

You are getting that error because the output of your reduce is an object. — Eddie
– Eddie, Commented Jun 1, 2018 at 4:01
Why do you want to chain reduce and map? What do you expect the result to be? — Felix Kling
– Felix Kling, Commented Jun 1, 2018 at 4:02
I am trying to combine reduce() with map() to reduce multiple box art objects to a single value: the url of the largest box art. — John John
– John John, Commented Jun 1, 2018 at 4:05

Isaac · Accepted Answer · 2018-06-01 04:04:46Z

1

const boxarts = [
        { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
        { width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
        { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
        { width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
    ]

    let newReduce = boxarts.reduce(function (accumulator, currentValue) {

        if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
            return accumulator
        } else {
            return currentValue
        }
    })

    console.log(newReduce.url)

From your mapping function it seems that you're trying to get the url, the problem is newReduce is an object and there is no map function. You can easily get the url simply using newReduce.url

answered Jun 1, 2018 at 4:04

Isaac

13k18 gold badges66 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John John Over a year ago

Is there a way to combine reduce() with map() to reduce multiple box art objects to a single value: the url of the largest box art?

CertainPerformance · Accepted Answer · 2018-06-01 04:04:50Z

1

The result of your reduce call is a boxart object, not an array. Don't use map, just access the url property:

const boxarts = [
  { width: 200, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg" },
  { width: 150, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg" },
  { width: 300, height: 200, url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg" },
  { width: 425, height: 150, url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg" }
]
let newReduce = boxarts.reduce(function(accumulator, currentValue) {
  if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
    return accumulator
  } else {
    return currentValue
  }
}).url

console.log(newReduce)

answered Jun 1, 2018 at 4:04

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

3 Comments

John John Over a year ago

Is there a way to combine reduce() with map() to reduce multiple box art objects to a single value: the url of the largest box art?

Barmar Over a year ago

@JohnJohn You can only do that if reduce returns multiple box art objects, which should be in an array.

John John Over a year ago

@Barmar I just posted the update with the solution. Thx.

brk · Accepted Answer · 2018-06-01 04:30:53Z

0

map works on an array but in your code the reduce method is returning an object, so map will not work. Since it is already returning an object you can get the url just by doing object.url

const boxarts = [{
    width: 200,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"
  },
  {
    width: 150,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg"
  },
  {
    width: 300,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg"
  },
  {
    width: 425,
    height: 150,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"
  }
]

let newReduce = boxarts.reduce(function(accumulator, currentValue) {

  if (accumulator.width * accumulator.height > currentValue.width * currentValue.height) {
    return accumulator
  } else {
    return currentValue
  }
}).url


console.log(newReduce)

If you still want to use the map function put the return of reduce in an array. Then you can use map method on this. Further the map method will again return an array

const boxarts = [{
    width: 150,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture150.jpg"
  },
  {
    width: 300,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture300.jpg"
  },
  {
    width: 425,
    height: 150,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture425.jpg"
  },
  {
    width: 200,
    height: 200,
    url: "http://cdn-0.nflximg.com/images/2891/Fracture200.jpg"
  }
]

let newReduce = [boxarts.reduce(function(acc, currentValue) {

  if (acc.width * acc.height > currentValue.width * currentValue.height) {
    return acc
  } else {
    return currentValue
  }
}, boxarts[0])].map(function(item) {
  return item.url
})
console.log(newReduce)

edited Jun 1, 2018 at 4:30

answered Jun 1, 2018 at 4:04

brk

50.3k10 gold badges59 silver badges85 bronze badges

10 Comments

John John Over a year ago

I see , but is there a way to implement chaining reduce() and map(). This is for studying purpose.

Sebastian Simon Over a year ago

@brk Wouldn’t it make more sense to return an array of all largest box arts rather than an array of a single largest box art?

Sebastian Simon Over a year ago

@JohnJohn What exactly do you want to map over?

brk Over a year ago

@Xufox i think it is just the choice , what you are saying is also right and makes sense

John John Over a year ago

now it is much better , Yes I want to return and array of largest box url

|

Collectives™ on Stack Overflow

chaining reduce() and map() Javascript

3 Answers 3

1 Comment

3 Comments

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related