Как получить доступ к названию города, вложенного в ответ API?

Question

Я запрашиваю данные с помощью axios.get (...), успешно получаю возврат как вложенные объекты.Я могу получить доступ к data.message, data.cnt, data.cod, но не могу получить доступ к свойствам "city".получал undefine или typeerror.

Я хочу получить доступ к свойствам городского объекта, вложенного в данные ответа.как это "data.city.name", но ошибки.

{
  "cod": "200",
  "message": 0.0051,
  "cnt": 40,
  "list": [
    {
      "dt": 1545318000,
      "main": {
        "temp": 282.74,
        "temp_min": 282.167,
        "temp_max": 282.74,
        "pressure": 1012.86,
        "sea_level": 1020.54,
        "grnd_level": 1012.86,
        "humidity": 84,
        "temp_kf": 0.57
      },
      "weather": [
        {
          "id": 500,
          "main": "Rain",
          "description": "light rain",
          "icon": "10d"
        }
      ],
      "clouds": { "all": 44 },
      "wind": { "speed": 5.67, "deg": 243.503 },
      "rain": { "3h": 0.25 },
      "sys": { "pod": "d" },
      "dt_txt": "2018-12-20 15:00:00"
    },
    {
      "dt": 1545739200,
      "main": {
        "temp": 282.628,
        "temp_min": 282.628,
        "temp_max": 282.628,
        "pressure": 1037.58,
        "sea_level": 1045.29,
        "grnd_level": 1037.58,
        "humidity": 100,
        "temp_kf": 0
      },
      "weather": [
        {
          "id": 500,
          "main": "Rain",
          "description": "light rain",
          "icon": "10d"
        }
      ],
      "clouds": { "all": 76 },
      "wind": { "speed": 2.02, "deg": 212.503 },
      "rain": { "3h": 0.13 },
      "sys": { "pod": "d" },
      "dt_txt": "2018-12-25 12:00:00"
    }
  ],
  "city": {
    "id": 2643743,
    "name": "London",
    "coord": { "lat": 51.5073, "lon": -0.1277 },
    "country": "GB",
    "population": 1000000
  }
}

Answer 1

Может не полностью представлять то, что вам нужно, но это должно показать, как установить состояние по умолчанию, получить результаты и затем передать их в компоненты.Ваш объект в порядке, я чувствую, что вы, возможно, пытаетесь получить к нему доступ до завершения работы Axios.

export class DataView extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isLoading: true,
        data: {}
      };
      this.defaultState = {
         // default properties of state 
      };
    }

    componentWillMount() {
      this.fetchData();
    }

    fetchData = () => {
        await axios.get( ${apiEndpoint}${inputCity}&appid=${apiKey} )
        .then( data => {
            this.setState({
              data,
              ...this.defaultState,
              isLoading: false
            });
        });
    };


    render() {
      return (
        <Fragment>
          {this.state.isLoading ? ( // Check if it's still loading and load nothing if true
            <Fragment />
          ) : (
            <Component withProps={this.state.data}></Component> // Data can be accessed if isLoading: false
          )}
        </Fragment>
      );
    }
  }

Answer 2

Кажется, хорошо работает с data.city.name

const data = {
  "cod": "200",
  "message": 0.0051,
  "cnt": 40,
  "list": [
    {
      "dt": 1545318000,
      "main": {
        "temp": 282.74,
        "temp_min": 282.167,
        "temp_max": 282.74,
        "pressure": 1012.86,
        "sea_level": 1020.54,
        "grnd_level": 1012.86,
        "humidity": 84,
        "temp_kf": 0.57
      },
      "weather": [
        {
          "id": 500,
          "main": "Rain",
          "description": "light rain",
          "icon": "10d"
        }
      ],
      "clouds": { "all": 44 },
      "wind": { "speed": 5.67, "deg": 243.503 },
      "rain": { "3h": 0.25 },
      "sys": { "pod": "d" },
      "dt_txt": "2018-12-20 15:00:00"
    },
    {
      "dt": 1545739200,
      "main": {
        "temp": 282.628,
        "temp_min": 282.628,
        "temp_max": 282.628,
        "pressure": 1037.58,
        "sea_level": 1045.29,
        "grnd_level": 1037.58,
        "humidity": 100,
        "temp_kf": 0
      },
      "weather": [
        {
          "id": 500,
          "main": "Rain",
          "description": "light rain",
          "icon": "10d"
        }
      ],
      "clouds": { "all": 76 },
      "wind": { "speed": 2.02, "deg": 212.503 },
      "rain": { "3h": 0.13 },
      "sys": { "pod": "d" },
      "dt_txt": "2018-12-25 12:00:00"
    }
  ],
  "city": {
    "id": 2643743,
    "name": "London",
    "coord": { "lat": 51.5073, "lon": -0.1277 },
    "country": "GB",
    "population": 1000000
  }
}

document.write(data.city.name);

getData = async () => {
  const { inputCity } = this.state;

  try {
    const data = await axios.get(${apiEndpoint}${inputCity}&appid=${apiKey});
    this.setState({ data });
    console.log(this.state.data);
    return data;
  } catch (err) {
    console.error(err);
  }
}

Answer 3

Использовать JSON.parse ();

Пример:

var data = JSON.parse(yourJSONObject)
console.log(data.city.name)

Answer 4

Я думаю, у вас есть некоторые ошибки в вашем коде, потому что я могу получить доступ к данным, и json также допустим.

попробуйте console.log () ответить и посмотреть, что происходит.

Answer 5

если вы получаете data.message, то вы должны получить название города с data.city.name