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, Aug 09 '21 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, Aug 09 '21 at 16:20

Laczkó Örs · Answer 1 · 2021-08-09T21:05:56.427

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

how could this be implemented in reactjs? – jdevnew Aug 09 '21 at 20:22 — jdevnew, Aug 09 '21 at 20:22

Displaying specific id from json file with reactjs

1 Answers1