React - How to access child values based on a selected parent value from a json object-CodePudding

I have the following json object

const myJsonObj = {
    "Parent1": {
        "children": [{
            "key": "1",
            "value": "p1-value1"
        }, {
            "key": "2",
            "value": "p1-value2"
        }]
    },

    "Parent2": {
        "children": [{
            "key": "1",
            "value": "p2-value1"
        }, {
            "key": "2",
            "value": "p2-value2"
        }]
    },

    "Parent3": {
        "children": [{
            "key": "1",
            "value": "p3-value1"
        }, {
            "key": "2",
            "value": "p3-value2"
        }]
    }
}

What I'm trying to do is I want to display all the parent in a drop-down list and based on the selection of this parent value I want to populate all the children's values in another drop-down list.

I'm fetching the parent values using

const keys = Object.keys(myJsonObj); // const parentArr = ['Parent1','Parent2','Parent3']

Now if my first drop-down has 'Parent1' selected. I want the second drop-down to show 'p1-value1','p1-value2'

I'm trying to achieve this using the following but it returns me the keys to the arrays say [0,1]

const childrenNode =  keys.map((key) => myJsonObj[key]);
const child = childrenNode.map((child) => child.children)
Object.keys(child ).map((key) => (Object.keys(child))[key])

With my limited understanding here, any guidance on how to fetch the child values for a selected parent is highly appreciated.

Thank You!

CodePudding user response：

You're complicating things.

you got the parents right (1)

then you make the children dependent on the selected parent, in this context, you can use a state variable for the parent (2).

When you set the parent upon the parent input change, the children will get updated with the derived value.

const parents = Object.keys(myJsonObj) /// 1

const [selectedParent, setSelectedParent] = useState(parents[0]); //2
const childrent = myJsonObj[selectedParent].children.map(child => child.value)

CodePudding user response：

You can achieve this by dynamically rendering the second dropdown. In your first dropdown, you choose your parent. Save this in a variable. Then you can select your child and populate the second select with your gained data.

So the js code would look something like this:

const parent = "Parent3" //remember you got this information from your first select
const targetChild = myJsonObj[parent].children;

The targetChild the array of your selected child. Now you can populate the select by using targetChild.map

Side note: you dont neet the key "children". You can also set you json like this:

const myJsonObject = {
  "Parent2": [{
      "key": "1",
      "value": "p2-value1"
    }, {
      "key": "2",
      "value": "p2-value2"
    }], ...
}