1

I am trying to group an object by division. I am not able to figure out how to map them.

So the object notation is something like below
obj={Division:[Assignee:]}

> Object.keys(this.state.ListItems).map(function(item,key)



> State:
> {"Division1":[{"Assignee":[{"Title":""}],"Division":"","DueDate":"","Id":"","Author":{"Title":""},"Email":""}]}

render:{Object.keys(this.state.ListItems).map(function(item,key){item.Division}

enter image description here

How do I render this so that it renders as below:
Grouping by division basically.

=> Division1
Assignee
Author
DueDate
=> Division1
Assignee
Author
DueDate

I am modifying initial object using below algorithm

     // Accepts the array and key
  const groupBy = (array, key) => {
    // Return the end result
    return array.reduce((result, currentValue) => {
      // If an array already present for key, push it to the array. Else create an array and push the object
      (result[currentValue[key]] = result[currentValue[key]] || []).push(
        currentValue
      );
      // Return the current iteration `result` value, this will be taken as next iteration `result` value and accumulate
      return result;
    }, {}); // empty object is the initial value for result object
  };
  const personGroupedByColor = groupBy(AssignmentList, 'Division');

Update: I was able to display the divisions, now I have to work on mapping the arrays inside each Division.

Object.keys(this.state.ListItems).map(function(item,key){return(<div>{item}</div>)})}
1

You would basically do a map within a map, to loop through the divisions, then through the array within each division. Something like this:

Object.keys(divisionGroupItems).map(function(division,key){
    return(<div>{division}
    { 
        divisionGroupItems[division].map(function(item, key) {
            return (<div>{item.Assignee} {item.DueDate}</div>);
        })
    }
    </div>);
})

| improve this answer | |
  • Thanks a lot I just figured it out. For any one looking for the same,here is my code.{Object.keys(this.state.ListItems).length===1 ? null: Object.keys(this.state.ListItems).map((key,i)=>{return <div> <div key={key}><p>{key}</p></div> {this.state.ListItems[key].map((item) => { return <div><p>{item.Assignee}</p></div>; })} </div>})} – ssspfx Mar 11 at 19:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.