AJAX related issue:'TypeError: data[i].results is undefined'

1

I am trying to use a for loop to only display the name of my API random user data and only want to display the name right now. I eventually expect my app to be similar to this app:

image
image866Ă—694 89.6 KB

Instead I get no output in my card body div and get an error in my console when I press the button:

image
image1737Ă—930 184 KB

Code that I think is relevant to my error:

 let output='';

    //     for(var i in users){
    //         // output+='<ul>'+'<li>ID:'+users[i].id+'</li>'+'<li>LOGIN:'+users[i].login+'</li>'+'<li>NODE ID:'+users[i].node_id+'</li>'+'</ul>';
    //         output+='<div class="user">'+'<img src="'+users[i].avatar_url+'" width="70" height="70">'+'<ul>'+'<li> ID :  '+users[i].id+ '</li>'+'<li> LOGIN :  '+users[i].login+ '</li>'+
    //             '<li> NODE ID:  '+users[i].node_id+ '</li>'+'</ul>'+'</div>';
    // }

       for(let i in data){
           output+='<h3>Name : '+data[i].results[0].name[i]+'</h3>';
       }

       cardbody.innerHTML=output;

Here is the link to my code:https://codepen.io/noblegas/pen/jObLJXY

I am also having issues with the border of my box container and keep outputting blurry images as you probably can already see

2

I fixed that issue. Now I am having a new problem of the for loop outputing all of my API data twice instead of just once :

image
image1917Ă—946 104 KB

Still have the blurry image issue as well as the border problem

3

The blurry image problem is because you are enlarging an image that is original small sized. Zooming/enlarging it doesn’t make it sharper this isn’t CSI Miami.

Also could you clarify what border problem means?

4

If you look at the image of my card body container, the black border surrounding that cardbody container doesn’t fully enclose.

do you knoq qhy my for loop is outputing all of my api data twice instead of just once?

5

The black border surounding the container is overlapped by the picture
if you changes the

width:418px;

you can actually see that the border is there but the image just won’t fit into it

About your API data I don’t have a clue about it as i don’t know AJAX

1 Like
6

“About your API data I don’t have a clue about it as i don’t know AJAX”

No problem. I am sure someone else will help.

7

Change the width of the image?

8

Yes making the image smaller in width
Just like a fat person get’s tinner