Mapping and Reducing an Array within an Array of Objects in Javascript

Question

I'd appreciate any advice on the below. I need to extract the keywords from the array within an array of objects below, and reduce them to show all keywords without repetition.

My data JSON object is below:

[
  {
    "word":"Cat",
    "answer":"A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  },
  {
    "word":"Dog",
    "answer":"A type of canine",
    "keywords": ["pet", "cat-catcher"]
  },
]

My JS code is below:

let keywordList = data.map(entry => {

  let list = [...entry.keywords];
    return (
      list.reduce(( finalArray, current ) => finalArray.concat(current),[])
  );
});

Within my React component, I iterate over the array using map again:

<p>
  keywords: {keywordList.map((word, index) => {
    return (
      <span key={word+index}>
        <a onClick={this.searchKeyword} href="#" id={word}>{word}</a>
        <span> | </span>
      </span>
    );

  })}
</p>

Unfortunately, my reduce function doesn't seem to be working, I'm getting an array of arrays. Any advice would be great.

Yes, you're clearly creating an array of arrays. Why don't you show us what the data should look like? — adeneo
– adeneo, Commented Aug 20, 2017 at 18:45

Danil Speransky · Accepted Answer · 2017-08-20 18:58:15Z

2

let data = [{
    "word": "Cat",
    "answer": "A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  }, {
    "word": "Dog",
    "answer": "A type of canine",
    "keywords": ["pet", "cat-catcher"]
  }
]

let keywords = [...new Set(data.reduce((a, e) => a.concat(e.keywords), []))]

JSFiddle

edited Aug 20, 2017 at 18:58

answered Aug 20, 2017 at 18:52

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

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

3 Comments

user7131971 Over a year ago

Thanks, this is exactly what I need, although all the answers here are great, and work perfectly! I need to practice using the reduce function more, thank you!

user7131971 Over a year ago

How do I mark it as answered? I upvoted both correct answered, but my vote is not registered as I don't have enough 'reputation, but I am unaware of how to mark it as answered. Thanks.

user7131971 Over a year ago

Done, thanks, I never noticed the tick mark there before, cheers!

Andy · Accepted Answer · 2017-08-20 18:55:07Z

1

Instead of map, a reduce with a filter:

var list = data.reduce((p, c) => {
  return p.concat(c.keywords.filter(el => !p.includes(el)));
}, []);

DEMO

answered Aug 20, 2017 at 18:55

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

GulshanZealous · Accepted Answer · 2017-08-20 19:31:11Z

0

const arr = [
  {
    "word":"Cat",
    "answer":"A type of feline",
    "keywords": ["pet", "mouse-catcher"]
  },
  {
    "word":"Dog",
    "answer":"A type of canine",
    "keywords": ["pet", "cat-catcher"]
  },
]

const keywords = [ ...arr.reduce((keywords,obj)=> [...keywords, ...obj.keywords ], [] )
                  .reduce((set,keyword)=> set.add(keyword), new Set() ) ]

The first reduce merges all keywords with repetition by concatenation and the second reduce converts the array into a Set removing all duplication. Finally, I wrap it with the resulting set with
[ ...Set ] to convert it into an array.

JS Bin

answered Aug 20, 2017 at 19:31

GulshanZealous

6388 silver badges9 bronze badges

1 Comment

user7131971 Over a year ago

Thanks, all the answers here are great, and much appreciated – although my upvote is not registered as I don't have enough 'reputation'. Thanks very much to all!

Collectives™ on Stack Overflow

Mapping and Reducing an Array within an Array of Objects in Javascript

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related