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

Time:10-13

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"
    }], ...
}
  • Related