CODEWITHSUNDEEP
javascriptarraysjsonreactjsobject
mura1
mura1

Reputation: 472

Looping the the data from an Api

I have an api from which I want to display the data, I have 2 arrays each one has a category how would I iterate and display these 2 categories, so category Arts and category Entertainment. I have tried something but it is not working it is giving me this errorTypeError: Cannot read property 'map' of undefined would really appreciate the help. Thanks in advance

import React,{useState, useEffect} from 'react'
import './Home.css'
import Books from './Books'
const url="https://json-api-smaiil.herokuapp.com/books"


const Home = () => {

  const [loading, setLoading] = useState(true)
  const [books, setBooks] = useState({})

    const fetchData =async()=>{
    setLoading(true)
    const response = await fetch(url)
    const data = await response.json()
    console.log(data)
    setBooks(books)
    }

  useEffect(()=>{
    fetchData();
  })
  

    return (
        <div>
          <h1 className='categories'>Categories</h1>
          {books[0].map((book)=>{
            return (<li key={book.id}>{book.category}</li>)
          })}
        </div>
    )
}

export default Home

{
     "Arts":[{
    "category": "Arts"
    Language: "English"
    Narrated by: "Faith G. Harper PhD LPC-S ACS ACN"
    Regular price: "$17.47"
    Release date: "03-20-18"
    bookName: "Unf--k Your Brain"
    by: "Faith G. Harper PhD LPC-S ACS ACN"
    category: "Arts and Entertainment"
    id: "1"
},
{

    Language: "English"
    Length: "1 hr and 33 mins"
    Narreted by: "James Taylor"
    Regular price: "$9.95"
    Release date: "01-31-20"
    Series: "Words + Music"
    bookName: " Break Shot: My First 21 Years"
    by: "James Taylor"
    id: "2"
}],

    "Entertainment":[{   
    "category" :"Entertainment"
    "id": "9",
    "image": "https://m.media-amazon.com/images/I/51tpSb0iy+L._SL500_.jpg",
    "bookName": "The Hiding Place",
    "by": "Corrie ten Boom, John Sherrill, Elizabeth Sherrill",
    "Narreted by": "Wanda McCaddon",
    "Length": "8 hrs and 14 mins",
    "Release date": "10-03-11",
    "Language": "English",
    "rating": "6,641 ratings",
    "Regular price": "$24.95",
  
},

{
    Language: "English"
    Length: "1 hr and 7 mins"
    Narreted by: "Aidan Gillen"
    Regular price: "$9.95"
    Release date: "03-31-15"
    bookName: "The Art of War"
    by: "Sun Tzu"
    id: "12"   
    rating: "19,765 ratings"
 
}]
}

Upvotes: 0

Views: 73

Answers (3)

Kenny Sexton
Kenny Sexton

Reputation: 383

const [books, setBooks] = useState({})

At this line you are setting the default value as an Object you are getting that error because the map function does not work with an object. Change the default to an empty array.

const [books, setBooks] = useState([])

Upvotes: 0

Jakir Hossen
Jakir Hossen

Reputation: 461

change this. cause you have to map object, not array.

books[0].map((book)=>{
     return (<li key={book.id}>{book.category}</li>)
})

to

Object.keys(books).map(function(key, index) {
  let book = books[key];
  return <li key={key}>{book[0].category}</li>
});

Upvotes: 2

navintellis
navintellis

Reputation: 59

try the below code:

      books.Arts.map((book)=>{
        return (<li key={book.id}>{book.category}</li>)
      })

One issue I see is the entry at index 1 of your array doesn't have key value corresponding to category which would give you undesired results.

Upvotes: 1

Related Questions