Displaying specific id from json file with reactjs

Question

How could I display data from a json file using reactjs.

I would like to display a specific value on my website using a json file. Using this example json file.

const data = [
  {
    items: {
      item: [
        {
          id: "0001",
          type: "donut",
          name: "Cake",
          ppu: 0.55,
          batters: {
            batter: [
              {
                id: "377",
                type: "Regular",
              },
              {
                id: "609",
                type: "Chocolate",
              },
              {
                id: "788",
                type: "Blueberry",
              },
              {
                id: "809",
                type: "Devil's Food",
              },
            ],
          },
          topping: [
            {
              id: "5001",
              type: "None",
            },
            {
              id: "5002",
              type: "Glazed",
            },
            {
              id: "5005",
              type: "Sugar",
            },
            {
              id: "5007",
              type: "Powdered Sugar",
            },
            {
              id: "5006",
              type: "Chocolate with Sprinkles",
            },
            {
              id: "5003",
              type: "Chocolate",
            },
            {
              id: "5004",
              type: "Maple",
            },
          ],
        },
      ],
    },
  },
];

How could I access for example items.item.batters.batter for id 609 and display the type in this case "Chocolate" using reactjs without using something like this:

batters.batter[1].type

and instead displaying it for the specific id (609)?

Do you want to map through the data and display the list? Or what is the problem with your current solution? — Laczkó Örs
– Laczkó Örs, Commented Aug 9, 2021 at 16:04
I just want to display this one item. The problem is that my actual json file keeps changing so using this method will sometimes return another item depending my database content. So i need to specifically look for and display id x. So sometimes my item { id: "609", type: "Chocolate" } will be batter[1] sometimes it is batter[6] or something depending on the content — jdevnew
– jdevnew, Commented Aug 9, 2021 at 16:20

Laczkó Örs · Accepted Answer · 2021-08-09 21:05:56Z

1

If you need to find a specific object, that has a specific value in a list of objects, you can do it as such:

const [batter, setBatter] = useState([
  {
    id: "377",
    type: "Regular"
  },
  {
    id: "609",
    type: "Chocolate"
  },
  {
    id: "788",
    type: "Blueberry"
  },
  {
    id: "809",
    type: "Devil's Food"
  }
]);

const [results, setResults] = useState([]);

const searchInList = () => {
  let _results = [];
  let toSearch = 609;

  for (var i = 0; i < batter.length; i++) {
    for (key in batter[i]) {
      if (batter[i][key].indexOf(toSearch) != -1) {
        _results.push(batter[i]);
      }
    }
  }
};

setResults(_results);

useEffect(() => {
  searchInList();
}, [batter]);

You can read more about this here: JS search in object values

edited Aug 9, 2021 at 21:05

answered Aug 9, 2021 at 18:08

Laczkó Örs

1,1261 gold badge28 silver badges45 bronze badges

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

1 Comment

jdevnew Over a year ago

how could this be implemented in reactjs?

Collectives™ on Stack Overflow

Displaying specific id from json file with reactjs

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related