How can I resolve this error: GET http://127.0.0.1:5500/Fetch_user_data/undefined 404 (Not Found)

Rick Derick 0
Viewed 32

iam fetching data from an external api to be displayed on a webpage using a card ofwhich the cards are displayed but with "undefined" message instead of the values. my console.log(completedata) displays records in an array.below is my code:

<script>
        
        fetch("https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=key4v56MUqVr9sNJv")
      
            .then((data)=>{
               // console.log(data)
               return data.json();

            })
            .then ((completedata)=>{
             //console.log(completedata.records[0])
             let data1="";
               completedata.records.map((values)=>{
                data1+=` 
                <div class="card">
                    <img src=${values.avatar} alt="Avatar" class="avatar">
                    <p class="name">${values.name}</p>
                    <p class="occupation">${values.occupation}</p>
             </div>
             `;
               });
               
               document.getElementById("card").
               innerHTML=data1;
              
            })
            
            .catch((error)=>{
                console.log(error);

            })
        
       

        </script>
javascript
1 Answers

There are several things that need to be addressed here so I'll try to work through them one at a time.

First: Remove Your API Key from your provided code. Because this site is public, you are exposing your API key (and any connected data) to the entire internet, which can include bots and other nefarious individuals.

Next is about your specific error message "GET http://127.0.0.1:5500/Fetch_user_data/undefined 404 (Not Found)". The error you are getting is because the images that are set in the src attribute for each avatar doesn't exist, and this is the browser telling you it couldn't load the image. This is directly connected to the fact that your code pulls 'undefined' values for everything. So the browser is trying to load an image called 'undefined' (and the '*http://127.0.0.1:5500/Fetch_user_data/*' part is just the location the current page is running at).

Now, as to why the values are 'undefined'. This is because you are not pulling the data correctly based on the structure of the returned object. There is a records part of the object which contains an array of objects, however the values you want are inside of a fields object as well:

{
  "id":"rec0Aw9wpncgA9cdK",
  "createdTime":"2022-07-25T01:33:41.000Z",
  "fields": {
    "Id":79,
    "Name":"Julia A. Robles",
    "avatar":"https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg",
    "occupation":"Prosthodontist"
  }
}

It is also important to note that the properties of the object are case sensitive. This means when you try to pull the name property of this object (even after adjusting it to pull fields.name), it will fail because this property does not exist. Instead you must pull the case sensitive Name property.

And the last thing to address is the avatar images. While pulling the src correctly might seem like it will work, the actual URLs provided do not link to an image. AWS indicates the files either don't exist or are part of a bucket that has been removed.

But, after addressing all of those issues, you end up with something like this.

fetch("https://api.airtable.com/v0/appBTaX8XIvvr6zEC/tblYPd5g5k5IKIc98?api_key=YOUR_API_KEY_HERE")
  .then(r => r.json())
  .then(d => {
  let data1 = "";
  d.records.forEach(v => {
    data1 += `<div class="card">
        <span class="avatarLetter">${v.fields.Name.substr(0, 1)}${v.fields.Name.split(" ")[v.fields.Name.split(" ").length-1].substr(0, 1)}</span>
        <p class="name">${v.fields.Name}</p>
        <p class="occupation">${v.fields.occupation}</p>
      </div>`;
  });

  document.querySelector("#card").innerHTML = data1;
})
.catch(e => console.log(e));
.avatarLetter {
  background: #328DD2;
  color: #FFF;
  font-size: 2em;
  font-weight: bold;
  line-height: 2em;
  width: 2em;
  height: 2em;
  text-align: center;
  border-radius: 2em;
  display: inline-block;
}
<div id="card"></div>

EssXTee0
Related