Jammming: Unhandled Rejection (TypeError): Cannot read property '0' of undefined

Finishing up the Jammming project and typed in a search and the following showed up:

{{ Unhandled Rejection (TypeError): Cannot read property ‘0’ of undefined

(anonymous function)

src/util/Spotify.js:44

  41 | return jsonResponse.tracks.items.map(track => ({  42 |   id: track.id,  43 |   name: track.name,> 44 |   artist: track.artist[0].name,     | ^  45 |   album: track.album.name,  46 |   uri: track.uri  47 | }));

View compiled

(anonymous function)

src/util/Spotify.js:41

  38 | if (!jsonResponse.tracks) {  39 |   return [];  40 | }> 41 | return jsonResponse.tracks.items.map(track => ({     | ^  42 |   id: track.id,  43 |   name: track.name,  44 |   artist: track.artist[0].name,

View compiled

This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error. Click the ‘X’ or hit ESC to dismiss this message.
}}

Hey @charleskallick4619, The error message is basically saying that track.artist is undefined. You are using track.**artist** instead of track.artist**s**. Also, the instructions say "Artist - returned as track.artist**s**[0].name.

I hope this will help you!

2 Likes

Should be using console.log() to debug/check your code if you get stuck and compare with what you are expecting to see.

https://www.codecademy.com/courses/javascript-errors-debugging/lessons/debugging-code/exercises/console-log-debugging-ii

1 Like

got it taken care of. thank you!


TypeError: Cannot read property ‘0’ of undefined
at IncomingMessage , im having similar problem can someone help please.

Weather App
    <form action="/" method="POST">
    <label for="cityInput">cityName: </label>
    <input id="cityInput" type="text" name="cityName">
    <button type="submit">GO</button>
    </form>

    <script src="" async defer></script>
</body>

//here is my app.js code//

const express=require(“express”);

const https=require(“https”);

const bodyParser=require(“body-parser”);

const {response}=require(“express”);

const app=express();

app.use(bodyParser.urlencoded({extended:true}));

app.get("/",function(req,res){

res.sendFile(__dirname +"/index.html");

});

app.post("/",function(req, res){

const query=req.body.cityName;

const appId=“cbb82ce079c621c839ff84be7f96ca23”;

const units=“metric”;

const url=“https://api.openweathermap.org/data/2.5/weather?q=”+ query +"&appid “+ appId +”=&units=" + units;

https.get(url,function(response){

console.log(response.statusCode);

response.on("data",function(data){
const weatherData  =JSON.parse(data);


const icon=weatherData.weather[0].icon;

const weatherDiscription=weatherData.weather[0].description


const imageURL="http://openweathermap.org/img/wn/"+ icon+"@2x.png";

 const temp=weatherData.main.temp;


 res.write("<h1>the temperature in "+ query +" is " + temp + "degrees Celcius</h1>");

 res.write("<p>The current weather is " +  weatherDiscription + "</p>");

 res.write("<img src=" + imageURL +">");


 res.send();
 });

});

})

app. listen(3000,function(req, res){

 console.log("the sever is running at port 3000");

}) ;