How to call Json objects dynamically in react

Question

I am having a JSON file in below mentioned format and I want to map the elements to second drop down based on the first drop down value.

Can I achieve it by using this syntax

const toolList = datalist.AssetCategory; -- datalist is the JSON file name <br>
const AIAssets = datalist.SelectedValue;  -- SelectedValue is an variable.

--- JSON Data

{
    "AssetCategory":
    [
        {
            "toolname" :"Industry"
        },
        {
            "toolname" :"Process"
        },
        {
            "toolname": "Technology"
        }
    ],
    "Industry":
    [
        {
            "asset" : "Banking"
        },
        {
            "asset" : "HealthCare"
        },
        {
            "asset" : "Telecom"
        },
        {
            "asset" : "Finance & Banking"
        },
        {
            "asset" : "Insurance"
        },
        {
            "asset" : "Manufacturing"
        }
    ],
    "Process":
    [
        {
            "asset" : "Accounts Payable"
        },
        {
            "asset" : "Finance & Accounting"
        },
        {
            "asset" : "Human Resources"
        }
    ],
    "Technology":
    [
        {
            "asset" : "Excel"
        },
        {
            "asset" : "SAP S/4HANA"
        },
        {
            "asset" : "GUI"
        }
    ]
}

[Dynamically access object property using variable](https://stackoverflow.com/q/4244896/8234457). Example `const industryStr = 'Industry'; const dynamicResult = dataObj[industryStr];` — Caleb Taylor, May 15 '20 at 08:25
Will the second dropdown have different keys for example assets, and toolname in second or is it just going to be these only? — Zain Zafar, May 15 '20 at 08:35
@CalebTaylor Thank you so much for your quick response, It's working. — Nikhil Krishnan, May 15 '20 at 09:39

Zain Zafar · Accepted Answer · 2020-05-15T08:49:52.297

Here's working example of your problem, though for secondary dropdown it doesn't support dynamic keys you'll have to specify them. But for first one you can have as many dynamic keys as you want.

Complete Demo

You can access the values from first dropdown as follows

import React, { useState } from "react";

import data from "./data.json";

export default function App() {
  // Set primary keys here
  const primaryOptions = Object.keys(data);
  // Option selected from first dropdown, initially set to be empty
  const [selectedPrimaryOption, setSelectedPrimaryOption] = useState("");

  // Array of secondary selected options
  const [secondaryOptions, setSecondaryOptions] = useState([]);

  // Change the secondary dropdown when first is changed.
  const handleChange = e => {
    const value = e.target.value;
    setSelectedPrimaryOption(value);

    if (value) {
      // Accessing keys ['asset', 'toolname'] etc. here
      const secondaryData = data[value].map(
        v => v["asset"] || v["toolname"] || v
      );
      setSecondaryOptions(secondaryData);
    }
  };

  return (
    <div className="App">
      <div>
        <label>Primary Select</label>
        <select value={selectedPrimaryOption} onChange={handleChange}>
          <option value="">Select Option</option>
          {primaryOptions.map(option => (
            <option value={option} key={option}>
              {option}
            </option>
          ))}
        </select>
      </div>

      <div>
        <label>Secondary Select</label>

        <select>
          {secondaryOptions.map(option => (
            <option value={option} key={option}>
              {option}
            </option>
          ))}
        </select>
      </div>
    </div>
  );
}

How to call Json objects dynamically in react

1 Answers1