Блог

Главная - Вопросы по программированию - Заполнение выпадающих списков React JS из данных Json

Заполнение выпадающих списков React JS из данных Json

#javascript #json #reactjs

Вопрос:

У меня есть некоторые данные json, которые выглядят так:

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

Я хочу, чтобы выпадающий список был заполнен авторами (например, author1). Когда этот раскрывающийся список выбран, я затем хочу заполнить другой раскрывающийся список ключами для этого автора (книги и фильмы).

Итак. если мой json находится в переменной с именем data, я хочу заполнить первый раскрывающийся data.keys() список, а затем второй, data[author].keys() где автор-значение, выбранное в первом раскрывающемся списке.

Я видел много примеров заполнения с помощью json, но не с помощью ключей. Я очень новичок в реагировании на JS, поэтому я не уверен, как это сделать.

Спасибо

Комментарии:

1. Я говорю это наилучшим из возможных способов. Я хотел бы задать хорошие вопросы, которые могут принести пользу сообществу. Однако, когда люди голосуют за закрытие, не оставляя комментариев о том, почему они так проголосовали, это очень затрудняет написание лучших вопросов в будущем. Я понимаю, что некоторые вопросы не являются хорошими вопросами, пожалуйста, оставьте комментарий, чтобы помочь запрашивающему (и не только мне). Спасибо

Ответ №1:

вы можете использовать следующий поток.

 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>
  );
};
Метки: