如何根据嵌套数组中的值过滤带有对象的数组并对其进行计数

Question

I have a movies array with objects listing genres (as an array ) for each movie:

const movies = [
    {
        "title": "Movie A",
        "genre": ["Action", "Sci-Fi", "Thriller"]
    },
    {
        "title": "Movie B",
        "genre": ["Horror, Sci-Fi"]
    },
    {
        "title": "Movie C",
        "genre": ["Action", "Horror", "Thriller"]
    },
    {
        "title": "Movie D",
        "genre": ["Mystery", "Horror", "Sci-Fi"]
    }
];

Using (vanilla, ES6+ or Lodash) JavaScript: How do I create a new array (see below) with objects showing how many times ( count below) a genre ( label below) is listed in above movies genre array?

In other words: how many times a genre is listed above.

End result : a new array sorted alphabeticaly by label :

const genres = [
    {
        "label": "Action",
        "count": 2
    },
    {
        "label": "Horror",
        "count": 3
    },
    {
        "label": "Mystery",
        "count": 1
    },
    {
        "label": "Sci-Fi",
        "count": 3
    },
    {
        "label": "Thriller",
        "count": 2
    }
];

Answer 1

You can achieve this by putting all the genre arrays into an array and then flattening that array using .flat() . After that you can then use .reduce to create an array of objects from this array.

See working example below (read code comments for further explanation):

 const movies= [{title:"Movie A",genre:["Action","Sci-Fi","Thriller"]},{title:"Movie B",genre:["Horror","Sci-Fi"]},{title:"Movie C",genre:["Action","Horror","Thriller"]},{title:"Movie D",genre:["Mystery","Horror","Sci-Fi"]}]; res = movies.map(({genre}) => genre) // create array of genres (multi-dimensonal) .flat() // flatten the array of arrays to only have genres in it .sort((a,b) => a.localeCompare(b)) // sort the array alphabetically .reduce((acc, genre) => { let i = acc.length-1 // get the previous index of the last object let prev = acc[i]; // get the previous object if(prev && prev.label == genre) { // if the previous label is equal to the curren genre than: acc[i].count++; // add one to the current objects count } else { // otherwise... acc = [...acc, {label: genre, count: 1}]; // append a new object to the accumilator } return acc; // return the result of the accumilator to be used in next iteration }, []); // set starting value of reduce to empty array console.log(res);

Alternatively, if you cannot afford to use the .flat() method you can use the following instead:

 const movies= [{title:"Movie A",genre:["Action","Sci-Fi","Thriller"]},{title:"Movie B",genre:["Horror","Sci-Fi"]},{title:"Movie C",genre:["Action","Horror","Thriller"]},{title:"Movie D",genre:["Mystery","Horror","Sci-Fi"]}]; res = [].concat.apply([], movies.map(({genre}) => genre)) .sort((a,b) => a.localeCompare(b)) .reduce((acc, genre) => { let i = acc.length-1 let prev = acc[i]; if(prev && prev.label == genre) { acc[i].count++; } else { acc = [...acc, {label: genre, count: 1}]; } return acc; }, []); console.log(res);

Answer 2

This will create the array with the labels and the count

 const movies = [ { "title": "Movie A", "genre": ["Action", "Sci-Fi", "Thriller"] }, { "title": "Movie B", "genre": ["Horror", "Sci-Fi"] }, { "title": "Movie C", "genre": ["Action", "Horror", "Thriller"] }, { "title": "Movie D", "genre": ["Mystery", "Horror", "Sci-Fi"] } ]; var genres = []; for (var i = 0; i < movies.length; i++) { var list = movies[i].genre; for (var j = 0; j < list.length; j++) { var existingValue = genres.find(function (value) { return value.label === list[j] }); if (!existingValue) { genres.push( { label: list[j], count: 1 } ); } else { existingValue.count++; } } } console.log(genres)

Answer 3

• Get all the genres into a string array by using reduce
• sort the string array
• Use reduce to get the final object you need
  • Inside this, check if the counter object already has a label for the current genre
  • if yes, increment it, else add a new object to the array

 const movies=[{title:"Movie A",genre:["Action","Sci-Fi","Thriller"]},{title:"Movie B",genre:["Horror","Sci-Fi"]},{title:"Movie C",genre:["Action","Horror","Thriller"]},{title:"Movie D",genre:["Mystery","Horror","Sci-Fi"]}]; const final = movies.reduce((genres, {genre}) => genres.concat(genre), []) .sort() .reduce((counter, genre) => { const item = counter.find(c => c.label === genre); item ? item["count"]++ : counter.push({ label:genre, count:1 }); return counter }, []); console.log(final);

Or you can create an object with each genre as key and the value as the object you need in the final array. Then use Object.values to get the desired output:

 const movies=[{title:"Movie A",genre:["Action","Sci-Fi","Thriller"]},{title:"Movie B",genre:["Horror","Sci-Fi"]},{title:"Movie C",genre:["Action","Horror","Thriller"]},{title:"Movie D",genre:["Mystery","Horror","Sci-Fi"]}]; const final = movies .map(a => a.genre) .flat() .sort() .reduce((a, label) => ((a[label] = a[label] || {label, count: 0})["count"]++,a), {}); console.log(Object.values(final));