CODEWITHSUNDEEP
javascriptarraysreactjsobject
Christopher
Christopher

Reputation: 620

Mapping through array of objects after filtering and displaying dynamic common property as a header

I have an array of objects:

  const students = [
    { name: 'Tom', class: "Blue" },
    { name: 'Pom', class: "Blue" },
    { name: 'Max', class: "Red" },
    { name: 'Alex', class: "Red" },
    { name: 'John', class: "Yellow" }
  ];

And I would like to group the return values by the class property, so I can achieve something similar to this in HTML:

Class Blue: Tom, Pom
Class Red: Max, Alex
Class Yellow: John

note: the class property should be displayed once as HTML mark-up which is the reason I don't think this helps at all..

How should I go about it? I can user filter() (like below) but this is rather silly. I would ideally like to avoid doing this several times especially given the class property is dynamic (not known before hand).

const classRed = students.filter(student => student.class === "Red);
const classBlue = students.filter(student => student.class === "Blue);
...

I started this jsfiddle, but not sure how to deal with this object to display how I want it.

I guess this question is about getting the right data structure so I can then map through it to display what I need, rather than simply sorting the array.

Upvotes: 1

Views: 62

Answers (3)

Santosh Kumar Rao
Santosh Kumar Rao

Reputation: 49

let classes = {};

for(let student of students) {
  classes[student.class] = [...classes[student.class] || [], student.name];
}

console.log(classes);

Upvotes: 0

Amila Senadheera
Amila Senadheera

Reputation: 13245

Use reduce method to do the group by operation and use Object.entries to get the list of items to iterate.

Try like this

{
    Object.entries(
        students.reduce((prevValue, currValue) => {
            prevValue[currValue.class]
                ? prevValue[currValue.class].push(currValue.name)
                : (prevValue[currValue.class] = [currValue.name]);
            return prevValue;
        }, {})
    ).map(([classs, names]) => `Class ${classs}: ${names.join(", ")}`);
}


function App({}) {
    const students = [
        { name: "Tom", class: "Blue" },
        { name: "Pom", class: "Blue" },
        { name: "Max", class: "Red" },
        { name: "Alex", class: "Red" },
        { name: "John", class: "Yellow" }
    ];

    return (
        <div>
            {Object.entries(
                students.reduce((prevValue, currValue) => {
                    prevValue[currValue.class]
                        ? prevValue[currValue.class].push(currValue.name)
                        : (prevValue[currValue.class] = [currValue.name]);
                    return prevValue;
                }, {})
            ).map(([classs, names]) => (
                <div>{`Class ${classs}: ${names.join(", ")}`}</div>
            ))}
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("react"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="react"></div>

JS Fiddle => https://jsfiddle.net/9ahtz2jd/11/

NOTE: Always try to use filter, map, reduce functions.

enter image description here

Upvotes: 1

steve_pineapple
steve_pineapple

Reputation: 127

You could create a new object with the name of the classes as keys and an array with the names of the students as values.

const students = [
    { name: 'Tom', class: "Blue" },
    { name: 'Pom', class: "Blue" },
    { name: 'Max', class: "Red" },
    { name: 'Alex', class: "Red" },
    { name: 'John', class: "Yellow" }
];

let klasses = {};

for (let i = 0; i < students.length; i++) {
  let student = students[i];
  let klass = student.class;

  if (!klasses[klass]) {
    klasses[klass] = [student.name];
  } else {
    klasses[klass].push(student.name);
  }
}

console.log(klasses);

Upvotes: 0

Related Questions