Map objects with matching owner-CodePudding

I have this array of objects in a react component and want to map only those whose owner is logged in the website

const moles = [
        {name: 'Welthy Moles #001', image: Welthy1, Owner: 'Luis', id: 1 },
        {name: 'Welthy Moles #002', image: Welthy2, Owner: 'Pepe', id: 2 },
        {name: 'Welthy Moles #003', image: Welthy3, Owner: 'July', id: 3 },
        {name: 'Welthy Moles #004', image: Welthy4, Owner: 'Pepe', id: 4 },
        {name: 'Welthy Moles #005', image: Welthy5, Owner: 'Lola', id: 5 },
        {name: 'Welthy Moles #006', image: Welthy6, Owner: 'Luis', id: 6 },
        {name: 'Welthy Moles #007', image: Welthy7, Owner: 'Raul', id: 7 },
        {name: 'Welthy Moles #008', image: Welthy8, Owner: 'Brens', id: 8 },
        {name: 'Welthy Moles #009', image: Welthy9, Owner: 'Jack', id: 9 },
        {name: 'Welthy Moles #010', image: Welthy10, Owner: 'Sandra', id: 10 },
        {name: 'Welthy Moles #011', image: Welthy11, Owner: 'Pepe', id: 11 },
        {name: 'Welthy Moles #012', image: Welthy12, Owner: 'Luis', id: 12 },
        {name: 'Welthy Moles #013', image: Welthy13, Owner: 'Jose', id: 13 },
        {name: 'Welthy Moles #014', image: Welthy14, Owner: 'Sofy', id: 14 },
        {name: 'Welthy Moles #015', image: Welthy15, Owner: 'July', id: 15 },
        {name: 'Welthy Moles #016', image: Welthy16, Owner: 'Brens', id: 16 },
        {name: 'Welthy Moles #017', image: Welthy17, Owner: 'Brens', id: 17 },
        {name: 'Welthy Moles #018', image: Welthy18, Owner: 'Sofy', id: 18 },
        {name: 'Welthy Moles #019', image: Welthy19, Owner: 'Laura', id: 19 },
        {name: 'Welthy Moles #020', image: Welthy20, Owner: 'Charls', id: 20 }
    ];

I have this map config that shows all of them by id, but don't know how to show only the ones that match mole.Owner = currentAccount

  {moles.map((mole) => (
                <div className='mole-preview' key={mole.id}>
                    <h1> #{mole.id} </h1>
                    <img src={mole.image} alt="mole" />
                    <h2> {mole.name} </h2>
                </div>
            ))}

CodePudding user response：

Use the filter method:

  {moles.filter(mole => mole.Owner === currentAccount).map((mole) => (
                <div className='mole-preview' key={mole.id}>
                    <h1> #{mole.id} </h1>
                    <img src={mole.image} alt="mole" />
                    <h2> {mole.name} </h2>
                </div>
            ))}

This way you're creating an array where each item in the array is a mole who's owner is the same value as the currentAccount variable.

CodePudding user response：

You can filter out the moles based on the currentAccount and then use that filtered array in the template.

Working Demo :

const moles = [
  {name: 'Welthy Moles #001', image: 'Welthy1', Owner: 'Luis', id: 1 },
  {name: 'Welthy Moles #002', image: 'Welthy2', Owner: 'Pepe', id: 2 },
  {name: 'Welthy Moles #003', image: 'Welthy3', Owner: 'July', id: 3 },
  {name: 'Welthy Moles #004', image: 'Welthy4', Owner: 'Pepe', id: 4 },
  {name: 'Welthy Moles #005', image: 'Welthy5', Owner: 'Lola', id: 5 },
  {name: 'Welthy Moles #006', image: 'Welthy6', Owner: 'Luis', id: 6 },
  {name: 'Welthy Moles #007', image: 'Welthy7', Owner: 'Raul', id: 7 },
  {name: 'Welthy Moles #008', image: 'Welthy8', Owner: 'Brens', id: 8 },
  {name: 'Welthy Moles #009', image: 'Welthy9', Owner: 'Jack', id: 9 },
  {name: 'Welthy Moles #010', image: 'Welthy10', Owner: 'Sandra', id: 10 },
  {name: 'Welthy Moles #011', image: 'Welthy11', Owner: 'Pepe', id: 11 },
  {name: 'Welthy Moles #012', image: 'Welthy12', Owner: 'Luis', id: 12 },
  {name: 'Welthy Moles #013', image: 'Welthy13', Owner: 'Jose', id: 13 },
  {name: 'Welthy Moles #014', image: 'Welthy14', Owner: 'Sofy', id: 14 },
  {name: 'Welthy Moles #015', image: 'Welthy15', Owner: 'July', id: 15 },
  {name: 'Welthy Moles #016', image: 'Welthy16', Owner: 'Brens', id: 16 },
  {name: 'Welthy Moles #017', image: 'Welthy17', Owner: 'Brens', id: 17 },
  {name: 'Welthy Moles #018', image: 'Welthy18', Owner: 'Sofy', id: 18 },
  {name: 'Welthy Moles #019', image: 'Welthy19', Owner: 'Laura', id: 19 },
  {name: 'Welthy Moles #020', image: 'Welthy20', Owner: 'Charls', id: 20 }
];

const currentAccount = 'Pepe';

const res = moles.filter((obj) => obj.Owner === currentAccount);

console.log(res);