CODEWITHSUNDEEP
javascriptreactjs
Pep
Pep

Reputation: 677

Render from object values - React js

I have this response object from an api, and I want to loop it and render it as if it was a normal array, how can I render tshirt, jeans and furniture? I will not like to render the value of sneakers, Any suggestion?

const items = {
        tshirt: "Model TS",
        jeans: "ModelXW",
        sneakers: "indcdsc54",
        furniture: "Table31S"
    };

{Object.keys(items).map=>{i => 
  <Card>
 {items[key]}
  </Card>
 }
}

Upvotes: 0

Views: 189

Answers (4)

ReactDev313
ReactDev313

Reputation: 9

We can use destructuring and it is definitely more readable.

  const { sneakers, ...rest } = items;
    
    Object.keys(rest).map((item, id) => {
      <Card key={id}>
          {item}
      </Card>
    }
    );

Upvotes: 0

Venkatesh Saiprasath
Venkatesh Saiprasath

Reputation: 69

Instead of multiple loops, add an if condition to your code:

Object.keys(items).map(key => {
  if (key != 'sneakers') {
    return(<Card>{items[key]}</Card>);
  }
});

Upvotes: 1

AdriSolid
AdriSolid

Reputation: 2825

Try this one implementation line:

{Object.entries(items).filter(v => v[0] !== 'sneakers').map((v, idx) => <Card key={idx}>v[1]</Card>)}

Upvotes: 1

Ajeet Shah
Ajeet Shah

Reputation: 19823

You can read properties of an object using dynamic key: objectName[keyName]:

{
  Object.keys(items).map(key => <Card key={key}>{items[key]}</Card>)
}

and to filter out sneakers:

{Object.keys(items).filter(key => key !== 'sneakers').map((key) => (
  <Card key={key}>{items[key]}</Card>
))}

Upvotes: 1

Related Questions