如何使用从 JSON 响应的对象数组中获取值

Question

I am trying to learn how to use API's in react. I am making a search input for country names using the Rest countires API. I am getting data from https://restcountries.eu/rest/v2/all but I do not know how to handle this data as I can not use map on an object.

import axios from "axios";
import React, { useEffect, useState } from "react";

const App = () => {
 const [countries, setCountries] = useState([]);
 const [searchName, setSearchName] = useState("");

  useEffect(() => {
  axios.get("https://restcountries.eu/rest/v2/all").then(response => {
    setCountries(response.data);
   });
  }, []);

  const handleSearch = event => {
  setSearchName(event.target.value);
   };


   return (
  <div>
    <div>
      find countries <input onChange={handleSearch} />
    </div>
   <div></div>
  </div>
  );
 };

 export default App;

Expected to list countries after typing such as: sw = Botswana, Swaziland, Sweden...

Answer 1

From the question it seems like, these are requirements of your app - 1

1. you need to search by country name
2. As you type in, list of countries matching the search should be displayed.

I created this sandbox with the code you provided - https://codesandbox.io/embed/58115762-rest-countries-o638k .

It shows a pair of country name and its capital as you enter input in the search box.

This is how I changed your code:

1. You need to search countries? - Use search API with country name as value of text input - searchName

https://restcountries.eu/rest/v2/name/ ${searchName}

2. To display the output with countries matching your search keyword - map over countries and get appropriate keys. Pass those keys as props to your newly created Country component.

   Note, I did not need to change how you handled the JSON response. The searchName and countries are the only two state variables used to render the UI.

Answer 2

you will need to render countries after fetching from ajax request as like:

import axios from "axios";
import React, { useEffect, useState } from "react";

 const App = () => {
 const [countries, setCountries] = useState([]);
 const [searchName, setSearchName] = useState("");

 useEffect(() => {
 axios.get("https://restcountries.eu/rest/v2/all").then(response => {
  setCountries(response.data);
 });
 }, []);

 const handleSearch = event => {
 setSearchName(event.target.value);
 };


 return (
  <div>
  <div>
   find countries <input onChange={handleSearch} />
  </div>
  <ul>
    {(countries.length<=0)?"":
    countries.map(country=> <li>country.name</li> )
        }
  </ul>
 </div>
);
};

export default App;

Answer 3

I think this is what you are looking for. If you have got questions, dont hesitate to ask:)

 import axios from "axios"; import React, { useEffect, useState } from "react"; const App = () => { const [countries, setCountries] = useState([]); const [searchName, setSearchName] = useState(""); useEffect(() => { axios.get("https://restcountries.eu/rest/v2/all").then(response => { setCountries(response.data); }); }, []); const handleSearch = event => { let str = event.target.value; let filteredCountries = countries.filter((country) => country.name.toLowerCase().includes(str.toLowerCase())); setCountries(filteredCountries); setSearchName(str); }; return ( <div> <div> find countries <input onChange={handleSearch} /> </div> <ul> {(countries.length <= 0)? "": countries.map(country => <li>{country.name}</li>) } </ul> </div> ); }; export default App;

Answer 4

data =[your array];
countryList = data.map(data=>data.name)
console.log(countryList)