Mapping Array of Objects React

Question

So I am currently having a little problem here. So I have this Component that is taking data from JSON, I have Link but is showing the like 20 times more. The same amount of objects that I have in JSON file. I know this is the problem {data.map((postData), it is mapping all the objects in JSON file, when I want that the only (classE, priceE and imageE) to show.


import React from "react";
import data from "./data.json";
import { Link } from "react-router-dom";
function E() {
  return (
    <div>
      {data.map((postData) => {
        return (
          <div key={postData.id} className="m-4 bg-blue-100 rounded-xl p-8 ">
            <div>
              <Link
                to={`/payment/${postData.id}`}
                className="py-1 px-2 text-black-600 h-10  ml-24 mt-32 bg-white w- 
            36 rounded-full focus:outline-none focus:ring-2 focus:ring-gray-600"
              >
                Buy Now
              </Link>
              <img
                alt=""
                className="w-screen object-contain"
                src={postData.imageE}
              ></img>
              <h1 className=" ml-24 md:text-5xl sm:text-5xl  top-8">
                {postData.classE}
              </h1>
              <h1 className="text-base font-mono ml-24 top-24">
                {postData.priceE}
              </h1>
            </div>
          </div>
        );
      })}
    </div>
  );
}

export default E;

JSON file

[
  {
    "id": 0,
    "class": "A-Class",
    "Info": "A is the cheapest one ",
    "imageA": "./ModImages/Aclass.jpg",
    "textA": "fdsd",
    "trefuA": "fdsd",
    "optionA": "fdsd"
  },
  {
    "id": 1,
    "classE": "E-Class",
    "imageE": "./ModImages/Eclass.jpg",
    "priceE": "$43,600"
  }
]

Does this answer your question? Rendering specific Content from json (you have already asked this question) — pilchard
– pilchard, Commented Dec 27, 2020 at 0:03
So you want to display only the objects that contain all these properties: "classE", "imageE", "priceE"? — terrymorse
– terrymorse, Commented Dec 27, 2020 at 0:42
There are no objects in the JSON shown that have the properties classE, imageE, and priceE, so it would have to either show two items with blanks or no items at all. Your choice. — Heretic Monkey
– Heretic Monkey, Commented Dec 27, 2020 at 0:44

Steve x slapps.fr · Accepted Answer · 2020-12-27 05:05:20Z

1

Try this :

{data.filter(d =>
  d.classE &&
  d.imageE &&
  d.priceE) //FILTER FIRST
  .map((postData) => { //THEN MAP
  //CODE HERE
  })
}

You filter the data first, then you map it

answered Dec 27, 2020 at 5:05

Steve x slapps.fr

1,2441 gold badge8 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

terrymorse · Accepted Answer · 2020-12-27 05:12:21Z

0

If you want to display only the objects with the properties classE, imageE, and priceE, you need to filter out the objects you are not interested in.

Change this line:

{data.map((postData) => {

to:

{data.filter(d =>
  d.hasOwnProperty('classE') &&
  d.hasOwnProperty('imageE') &&
  d.hasOwnProperty('priceE'))
  .map((postData) => {

That will display only the objects you want.

edited Dec 27, 2020 at 5:12

answered Dec 27, 2020 at 0:51

terrymorse

7,1561 gold badge23 silver badges31 bronze badges

4 Comments

Tequila Over a year ago

It is giving me this error. × TypeError: d.hasOwnProperty(...).map is not a function

terrymorse Over a year ago

@Tequila The codes was missing a closing parenthesis. See the changed code above.

Tequila Over a year ago

Shouldn't there be a return statment

terrymorse Over a year ago

@Tequila - Yes, the return statement from the original should remain. In fact, everything that follows the .map((postData) => { should remain unchanged.

Collectives™ on Stack Overflow

Mapping Array of Objects React

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related