Filling React JS dropdowns from Json data

user_1758023 0
Viewed 53

I have some json data that looks like this:

{
    "author1": {
        "books": [{
                "title": "title1"
            },
            {
                "title": "title2"
            }
        ],
        "movies": [{
                "title": "movie1"
            },
            {
                "title": "movie2"
            }
        ]
    }
}

I want to have a dropdown that is populated with the authors (like author1). When that dropdown is selected, I then want to populate another dropdown with the keys for that author (books and movies).

So. if my json is in a variable named data, I want to populate the first dropdown with data.keys() and then the second with data[author].keys() where author is the value selected in the first dropdown.

I have seen a lot of examples of populating with json, but not with the keys. I am very new to React JS, so I am not sure how to do this.

Thanks

reactjs json javascript
1 Answers

you can use the following flow.

const AuthorData = ({ symtomsData }) => {
  const [data] = useState({
    author1: {
      books: [
        {
          title: "title1"
        },
        {
          title: "title2"
        }
      ],
      movies: [
        {
          title: "movie1"
        },
        {
          title: "movie2"
        }
      ]
    },
    author2: {
      books: [
        {
          title: "titleasd"
        },
        {
          title: "titleqweqw"
        }
      ],
      movies: [
        {
          title: "movieqwewq"
        },
        {
          title: "movieqweqwe"
        }
      ]
    }
  });
  const [authorWroks, setAuthorWorks] = useState({});

  const [selectedData, setSelectedData] = useState([]);

  const onChangeAuthor = useCallback(
    (e) => {
      const authorSelected = e.target.value;
      if (authorSelected) {
        setAuthorWorks(data[authorSelected]);
      } else {
        setAuthorWorks([]);
      }
    },
    [data]
  );

  const changeItem = useCallback(
    (e) => {
      const itemSelected = e.target.value;
      console.log("itemSelected", itemSelected);
      if (itemSelected) {
        console.log("authorWroks", authorWroks[itemSelected]);
        setSelectedData(authorWroks[itemSelected]);
      } else {
        setSelectedData([]);
      }
      
    },
    [authorWroks]
  );

  return (
    <Grid>
      <Col>
        <select onChange={onChangeAuthor}>
          <option value="">select</option>
          {Object.keys(data).map((key, i) => (
            <option value={key}>{key}</option>
          ))}
        </select>
        <br />
        <div>
          {Object.keys(authorWroks).length ? (
            <select onChange={changeItem}>
              <option value="">select</option>
              {Object.keys(authorWroks || []).map((key, i) => (
                <option onChange={changeItem} value={key}>
                  {key}
                </option>
              ))}
            </select>
          ) : undefined}
        </div>
        <div>
          {selectedData.length ? (
            <select>
              <option value="">select</option>
              {(selectedData || []).map((data, i) => (
                <option onChange={changeItem} value={data.title}>
                  {data.title}
                </option>
              ))}
            </select>
          ) : undefined}
        </div>
      </Col>
    </Grid>
  );
};
user_90870920
Related