Home > Back-end >  Issue with trying to access array of objects from JSON data
Issue with trying to access array of objects from JSON data

Time:11-23

I'm trying to fetch the values of the category key inside types array and then populate the div named category_option with the same. I feel I'm missing something here to make it work the way I want it to. The error gets thrown at the line that runs the map iterator. Attached below, are the code and a snip of the JSON data I've been trying to fetch. Please note that the JSON is huge which is why I only posted a snippet. Do let me know if more of it is needed.

[
    {
        "district": "Kolkata",
        "types": [
            {
                "category": "Grievances"   //These category values are what I'm after
            },
            {
                "category": "General"
            },
            {
                "category": "Urgent"
            },
            {
                "category": "Service"
            }
        ],
        "ward_no": [
            {
                "ward": "6",
        "grievance": [
                    {}........
        ]
        },
    ]
    }
]

import React, { useState } from "react";
import './category.css';
import { IoMdArrowDropdown } from 'react-icons/io';
import { GoTriangleUp } from 'react-icons/go';
import dummyData from '../../../json_data/dummy_data.json'

const SearchBox = () => {
    const [open, setOpen] = useState(false);
    const [dropDownValue, setDropDownValue] = useState(null);

    const onSelect = (value) => {
        setDropDownValue(value);
        setOpen(!open);
    };

    return (
        <div className="box_category">
            <div className="category_caption">Categories</div>
            <div className="block_drop">
                <div className="category_dropdown">
                    <div className="category_box">
                        {dropDownValue === null ? "Enter Category" : dropDownValue}
                    </div>
                    <div className="category_dropIcon" onClick={() => setOpen(prev => !prev)}>
                        {open ? <GoTriangleUp size={"22px"} /> : <IoMdArrowDropdown size={"30px"} />}
                    </div>
                </div>
                <div className={open ? "category_option" : "category_option_block"}>
                  //This is where the error gets thrown
                    {dummyData.map((key, values) => <div className="select_options" onClick={() => onSelect(dummyData[values].types[values].category)}>
                        {dummyData[values].types[values].category}
                    </div>
                    )}
                </div>
            </div>
        </div>
    );
}

export default SearchBox;

CodePudding user response:

As an example you can use something like this.

{dummyData.map((item) => (
        <div>
          <h3>{item.district}</h3>
          <p>
            {item.types.map((type) => (
              <div onClick={() => onSelect(type.category)}>{type.category}</div>
            ))}
          </p>
        </div>
      ))}

Be careful that dummyData is always defined in this example. If the response comes from a remote request manage the case when it is undefined on the first load and in case of errors.

CodePudding user response:

if you are only trying to map types array then you don't need to use index for that instead use this;

<div className={open ? "category_option" : "category_option_block"}>
                  //This is where the error gets thrown
                    {dummyData.types.map(({category}) => <div className="select_options" onClick={() => onSelect(category)}>
                        {category}
                    </div>
                    )}
</div>

I only edited faulty code block so you can change it with this

  • Related