I am using typescript in react to fetch single data of country with the country details using restcountries API i have an error trying to display the Languagues and currencies in the API all other data are displaying in my browser except for the Languages and currency please i need help trying to learn how to fetch a nested data. here is my code

import { useParams } from "react-router-dom";
import { useState, useEffect } from "react";
import axios from "axios";

const Country = () => {
  interface country {
    name: {
      common: string;
      official: string;
    };
    capital: string;
    flags: {
      svg: string;
    };
    region: string;
    languages: [];
    currencies: [];
    timezones: string;
    borders: [];
  }

  const { id } = useParams();

  const [country, setCountry] = useState<any[]>([]);
  const [isLoading, setLoading] = useState<boolean>(false);
  const [isError, setError] = useState<any>(null);

  useEffect(() => {
    const singleData = async () => {
      try {
        setLoading(true);
        const response = await axios.get(
          `https://restcountries.com/v3.1/name/${id}`,
        );
        setCountry(response.data);
        console.log(response.data);
      } catch (err) {
        console.log(err);
        setError(err);
      } finally {
        setLoading(false);
      }
    };
    singleData();
  }, [id]);

  return (
    <div className='w-full h-screen p-4 flex justify-center items-center'>
      {isLoading && <p className='text-xl font-medium'>...Loading</p>}
      {isError && (
        <p className='text-xl font-medium'>Error loading country details </p>
      )}
      {country.map((country: country, key: number) => (
        <div
          key={key}
          className='w-4/5 rounded-2xl h-2/3 flex bg-slate-900 p-4 gap-4 text-slate-200 '>
          <div className='w-4/5 flex justify-center items-center'>
            <img
              className=' w-fit h-70 object-contain'
              src={country.flags.svg}
              alt='images'
            />
          </div>
          <div className='w-full h-full p-4'>
            <ul className=' list-none text-xl'>
              <li> Name: {country.name.common}</li>
              <li> Official Name: {country.name.official}</li>
              <li> Capital: {country.capital}</li>
              <li> Region: {country.region}</li>
              <li> Languages: {country.languages.name}</li>
              <li> Currencies: {country.currencies.name}</li>
              <li> Timezone: {country.timezones}</li>
              <li> Border: {country.borders.join(", ")}</li>
            </ul>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Country;

CodePudding user response：

According to the documentation, this the shape of the currencies

"currencies": {
      "JPY": {
        "name": "Japanese yen",
        "symbol": "¥"
      }

You could utilize Object.values, Array.map and join methods to do what you want.

You need to access them like this:

Object.values(country.currencies).map(({name}) => name).join(', ')

And this is the shape of the languages object

"languages": {
      "jpn": "Japanese"
    }

You can access them like this:

Object.values(country.languages).join(', ')