CODEWITHSUNDEEP
javascriptreactjstypescript
Mohit Chauhan
Mohit Chauhan

Reputation: 123

Render data from array of object based on a particular property as a heading in React

I have an array of object like below -

{
   name:"Thor",
   universe:"Marvel",
   type:"God"
},
{
   name:"Batman",
   universe:"DC",
   type:"Human"
},
{
   name:"Iron man",
   universe:"Marvel",
   type:"Human"
},
];

Now, let's suppose that I want to render the objects such that the details of type Human are together, and the details of type God are together.

Basically, I want to display data based on the type property like below -

**Human**
name: Batman   universe:DC
name: Iron man universe:Marvel

**God**
name: Thor universe: Marvel

Upvotes: 0

Views: 531

Answers (5)

Priyen Mehta
Priyen Mehta

Reputation: 1187

This is one liner simple solution, it will work.

const data = [{
    name: "Thor",
    universe: "Marvel",
    type: "God"
  },
  {
    name: "Batman",
    universe: "DC",
    type: "Human"
  },
  {
    name: "Iron man",
    universe: "Marvel",
    type: "Human"
  },
];

let obj = {
  Human: 1,
  God: 2
}

console.log(data.sort((a, b) => obj[a.type] - obj[b.type]))

Upvotes: 0

Gideon Bamuleseyo
Gideon Bamuleseyo

Reputation: 137

I would first format the data type to an easy to use data type: See example below:

function App() {
  const characters = [
    {
      name: "Thor",
      universe: "Marvel",
      type: "God",
    },
    {
      name: "Batman",
      universe: "DC",
      type: "Human",
    },
    {
      name: "Iron man",
      universe: "Marvel",
      type: "Human",
    },
  ];

  const charactersObj = {};
  characters.forEach((character) => {
    const { type } = character;
    if (charactersObj[type]) {
      const currentArray = [...charactersObj[type]];
      currentArray.push(character);
      charactersObj[type] = currentArray;
    } else {
      charactersObj[type] = [character];
    }
  });

  return (
    <div>
      {Object.entries(charactersObj).map(([charType, charData]) => {
        return (
          <div>
            <p> {charType}</p>
            {charData.map(({name, universe}) =>  <p>name: {name} universe: {universe} </p>)}
        
          </div>
        );
      })}
    </div>
  );
}

Upvotes: 1

R4ncid
R4ncid

Reputation: 7129

you can try something like this

const data = [{
   name:"Thor",
   universe:"Marvel",
   type:"God"
},
{
   name:"Batman",
   universe:"DC",
   type:"Human"
},
{
   name:"Iron man",
   universe:"Marvel",
   type:"Human"
},
];

const transform = data => data.reduce((res, {type, ...rest}) => {

  return {
   ...res,
   [type]: [...(res[type] || []), rest]
  }

},{})

const toTemplate = (type, data) => {
return `**${type}**
${data.map(({name, universe}) => `name: ${name}   universe: ${universe}`).join('\n')}`
}
const toHtml = (data) => Object.entries(transform(data)).map(d => toTemplate(...d)).join('\n\n')

console.log(toHtml(data))

Upvotes: 0

Dean
Dean

Reputation: 551

Without changing your data structure, you can just map over the type

const App = () => {
    return (
        <div>
            Human:
            <div>
                {heroes.map((hero) =>
                    hero.type === "Human" ? <div>{hero.name}</div> : null,
                )}
            </div>
            God:
            <div>
                {heroes.map((hero) =>
                    hero.type === "God" ? <div>{hero.name}</div> : null,
                )}
            </div>
        </div>
    );
};

Upvotes: 0

Chang Alex
Chang Alex

Reputation: 517

I can help you with classification. You can do render your self.

const data=[{
   name:"Thor",
   universe:"Marvel",
   type:"God"
},
{
   name:"Batman",
   universe:"DC",
   type:"Human"
},
{
   name:"Iron man",
   universe:"Marvel",
   type:"Human"
},
];
const category={};
for(let i of data){
category[i.type]??=[]
category[i.type].push(i)
}

Category like:

{
   "God":[
      {
         "name":"Thor",
         "universe":"Marvel",
         "type":"God"
      }
   ],
   "Human":[
      {
         "name":"Batman",
         "universe":"DC",
         "type":"Human"
      },
      {
         "name":"Iron man",
         "universe":"Marvel",
         "type":"Human"
      }
   ]
}

Upvotes: 1

Related Questions