React-getting a string instead of array of objects after using fetch

Question

So I have a server side using express and a JSON file with an array of objects. but when I use fetch from the client side the data I get it as a string type. I tried to check and see if to format of the JSON is wrong but from what I could find it looks fine. I want the data as an array so I can use the .map function and put the data on the screen.

JSON file:

[
  
  {
     "title":"Death Bed",
     "artist":"Powfu",
     "artwork":"https://samplesongs.netlify.app/album-arts/death-bed.jpg",
     "url":"https://samplesongs.netlify.app/Death%20Bed.mp3",
     "id":"1"
  },
  {
     "title":"Bad Liar",
     "artist":"Imagine Dragons",
     "artwork":"https://samplesongs.netlify.app/album-arts/bad-liar.jpg",
     "url":"https://samplesongs.netlify.app/Bad%20Liar.mp3",
     "id":"2"
  },
  {
     "title":"Faded",
     "artist":"Alan Walker",
     "artwork":"https://samplesongs.netlify.app/album-arts/faded.jpg",
     "url":"https://samplesongs.netlify.app/Faded.mp3",
     "id":"3"
  },
  {
     "title":"Hate Me",
     "artist":"Ellie Goulding",
     "artwork":"https://samplesongs.netlify.app/album-arts/hate-me.jpg",
     "url":"https://samplesongs.netlify.app/Hate%20Me.mp3",
     "id":"4"
  },
  {
     "title":"Solo",
     "artist":"Clean Bandit",
     "artwork":"https://samplesongs.netlify.app/album-arts/solo.jpg",
     "url":"https://samplesongs.netlify.app/Solo.mp3",
     "id":"5"
  },
  {
     "title":"Without Me",
     "artist":"Halsey",
     "artwork":"https://samplesongs.netlify.app/album-arts/without-me.jpg",
     "url":"https://samplesongs.netlify.app/Without%20Me.mp3",
     "id":"6"
  }
]

server:

const express = require('express')
const app = express()
const port = 5000
const fs = require('fs');

const songList = fs.readFileSync('data/songs.json', 'utf8');

app.get("/songList",(req,res)=> 
{
    res.json(songList)
})



app.listen(port, () => {
    console.log(` app is listening on port ${port}`)
  })

client:

import { useState,useEffect } from "react" 



const MainPage = () => {
    const [songList,setSongList] = useState([{}])
    const [currentSong,setCurrentsong] = useState({})

    useEffect(()=>
    {
        fetch("/songList").then (
            response => response.json()).then ( 
            data => {setSongList(data)})
           
    },[])
     
    
    

    

    return(
        <div className="MainPageContiner">
        {
            console.log(typeof(songList))
            
        }  
        </div>
    )

}


export default MainPage

Arkellys · Accepted Answer · 2022-12-11 09:42:35Z

2

You need to parse the JSON using JSON.parse() to get the JS value:

fetch("/songList")
  .then(response => response.json())
  .then(data => { setSongList(JSON.parse(data)); })

answered Dec 11, 2022 at 9:42

Arkellys

8,0384 gold badges23 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React-getting a string instead of array of objects after using fetch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related