Как перебрать массив, который является значением ключа в JSON

Question

У меня есть такой файл JSON

[
 {
    "id": 1,
    "country": "Afghanistan",
    "city": ["Eshkashem","Fayzabad","Jurm","Khandud"]
 },
 {
    "id": 2,
    "country": "Italy",
    "city": ["Milano","Rome","Torino","Venezia"]
 }

]

и я хочу перебрать массив, расположенный в городе. Идея состоит в том, чтобы иметь два выбора, где первый выбор зарезервирован для стран, а второй зарезервирован для городов. Всякий раз, когда пользователь выбирает страну, я хочу заполнить второй выбор списком городов. Проблема в том, что я получаю только один массив всех городов для этой страны. Вот мой код:

export default class DiffCountries extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            contacts: [],
            selectedCountry: [],
            selectedCity: []
        }
    }
    
    onChangeHandler = (event) => {
      const test = CountriesData[event.target.value - 1];
        
        this.setState({
            selectedCountry: test,
            selectedCity: this.state.selectedCountry.city
        })

        console.log(this.state.selectedCity);
    }
    
    render() {
        const { contacts } = this.state;
        return (
          <div>
            <select name="" id="" onChange={this.onChangeHandler}>
                            {CountriesData.map(item => {
                                const { id, country } = item;
                                return <option key={id} value={id}>{country}</option>
                            })}
                        </select>
                        <select name="" id="">
                            {this.state.selectedCountry !== undefined ?
                                <option value="">{this.state.selectedCountry.city}</option> :
                                null
                            }
                            
                        </select>
           </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

И вот скриншот моей проблемы

Заранее спасибо!

Answer 1

Вам нужно использовать map() в массиве города.

<select name = "" id = "" > {
    this.state.selectedCountry !== undefined ?
    this.state.selectedCountry.city.map((x,i) => <option value={x} key={i}>{x}</option>)
    :null
  }

</select>

Answer 2

Вам нужно перебрать массив.

this.state.selectedCountry.city.map((city, index) => {
    return <option value={city} key={index}>{city}</option>
})

Имейте в виду, что использование индекса в качестве ключа считается анти шаблоном .В качестве ключа вы также можете использовать название города.Например:

this.state.selectedCountry.city.map(city => {
    return <option value={city} key={city}>{city}</option>
})

изменить, чтобы добавить ссылку на MDN документы, как это предлагается в комментариях: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

Answer 3

Пример:

const CountriesData = [
  {
    id: 1,
    country: 'Afghanistan',
    city: ['Eshkashem', 'Fayzabad', 'Jurm', 'Khandud'],
  },
  {
    id: 2,
    country: 'Italy',
    city: ['Milano', 'Rome', 'Torino', 'Venezia'],
  },
];

class DiffCountries extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCountry: null,
    };
  }

  onChangeHandler = event => {
    const selectedCountry = CountriesData[event.target.value - 1];

    this.setState({
      selectedCountry,
    });
  };

  render() {
    const { selectedCountry } = this.state;
    return (
      <div>
        <select
          name="country"
          defaultValue="country"
          onChange={this.onChangeHandler}
        >
          <option disabled value="country">
            Select country
          </option>
          {CountriesData.map(({ id, country }) => (
            <option key={id} value={id}>
              {country}
            </option>
          ))}
        </select>

        {selectedCountry && (
          <select name="city" defaultValue="city">
            <option disabled value="city">
              Select city
            </option>
            {selectedCountry.city.map(item => (
              <option key={item} value={item}>
                {item}
              </option>
            ))}
          </select>
        )}
      </div>
    );
  }
}

ReactDOM.render(<DiffCountries />, document.getElementById('container'));