iterate and render data from array and object in React.JS with nested object

Question

It is Category's Filter component develop

Need To Render Data from Nested Array and Render it with React Js

I Try To Do it As Below it is Showing but it is Rendering Nothing

Focus part is render part only

var selectedCategory = {filter_name: "Category"}

Array With Object is :

 var selectedOptions = [
  {
    filter_name: "Category",
    attribute_code: "category_id",
    attribute_input_type: "",
    filter_options: [
      {
        label: "Brands",
        value: "465",
        count: "10",
      },
      {
        label: "Perfumes",
        value: "789",
        count: "1425",
      },
    ],
    selectedOptions: ["465"],
    filter_min_price: null,
    filter_max_price: null,
  },
  {
    filter_name: "Price",
    attribute_code: "price",
    attribute_input_type: "price",
    filter_options: [
      {
        label: "BHD 10,000 - BHD 0",
        value: "0.00-10000-0",
        count: "1",
      },
      {
        label: "BHD 0 - BHD 10,000",
        value: "0.00-10000",
        count: "5953",
      },
    ],
    filter_min_price: "BHD  -12",
    filter_max_price: "BHD  24481",
    selectedOptions: ["0.00-10000-0"],
  },
];

I have Render It with this way by using too many map and i don't know is there any easy way to do it or not, code is given below

<div className="product-catres">
  {selectedOptions &&
    selectedOptions.length > 0 &&
    selectedOptions.map((option) => {
      {
        option.filter_name === selectedCategory.filter_name &&
          option.filter_options.map((option) => {
            return (
              <div key={option.value} className="pcoption">
                <div className="form-check">
                  <label className="form-check-label">
                    <input
                      className="form-check-input"
                      type="checkbox"
                      onChange={() => handleSelectedFilterOptions(option.value)}
                      checked={
                        selectedOptions &&
                        selectedOptions.includes(option.value)
                          ? true
                          : false
                      }
                    />
                    {option.label}
                  </label>
                </div>
              </div>
            );
          });
      }
    })}
</div>;

Thanks in Advance For Helping Me out

kuba · Accepted Answer · 2022-10-21 10:18:42Z

2

Before rendering you can get object you want to render.

const selectedOption = selectedOptions.find(item => item.filter_name === selectedCategory)

And then all you need to do is to render that one selected object.

<div className="product-catres">
{ selectedOption?.filter_options?.map((option) => {
    return (
        <div key={option.value} className="pcoption">
            <div className="form-check">
                <label className="form-check-label">
                <input
                    className="form-check-input"
                    type="checkbox"
                    onChange={() => handleSelectedFilterOptions(option.value)}
                    checked={
                        selectedOption.selectedOptions &&
                        selectedOption.selectedOptions.includes(option.value)
                            ? true
                            : false
                    }
                />
                {option.label}
                </label>
            </div>
        </div>
    );
})}

answered Oct 21, 2022 at 10:18

kuba

1611 silver badge6 bronze badges

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

1 Comment

shivam dwivedi Over a year ago

short and sweat answer as i want

Zein · Accepted Answer · 2022-10-21 10:20:21Z

1

{selectedOptions &&
      selectedOptions.length > 0 &&
      selectedOptions.map((option) => 
          option.filter_name === selectedCategory.filter_name &&
            option.filter_options.map((option) => {
              return (
                <div key={option.value} className="pcoption">
                  <div className="form-check">
                    <label className="form-check-label">
                      <input
                        className="form-check-input"
                        type="checkbox"
                        onChange={() => handleSelectedFilterOptions(option.value)}
                        checked={
                          selectedOptions &&
                          selectedOptions.includes(option.value)
                            ? true
                            : false
                        }
                      />
                      {option.label}
                    </label>
                  </div>
                </div>
              );
            })
        )}

edited Oct 21, 2022 at 10:20

answered Oct 21, 2022 at 10:14

Zein

5747 silver badges30 bronze badges

1 Comment

shivam dwivedi Over a year ago

well, i also did same thing or please help me to find where should i have to add it

Collectives™ on Stack Overflow

iterate and render data from array and object in React.JS with nested object

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related