Problem with fetch an jjquery chaining

#1

Hi I have this problem I have a code:

      .then(users=>{
        contributorsArr.forEach(function(obj1) {
            users.forEach(function(obj) {
                if (obj1.id === obj.id) {
                    Object.assign(obj, obj1)
                }
            });
            return users;
        });
        console.log(users);
        $.each(users,function (index,user) {
            var that = this;
            $(document).on('click','#userPanel',function (user) {
                console.log(that.name);
            });
            $('#users').append(`
                    <div id="userPanel" class="panel panel-default">
                      <div class="panel-heading">
                        <h3 class="panel-title">${user.name ? user.name : user.login}</h3>
                      </div>
                      <div class="panel-body">
                        <div class="row">
                            <div class="col-md-3 ">
                                <img class="thumbnail avatar" src="${user.avatar_url}" alt="avatar">
                                <a target="_blank" class="btn btn-primary btn-block" href="${user.html_url}">View Profile on GitHub</a>
                            </div>
                            
                            <div class="col-md-9">
                            <span class="label label-default">Public Repos: ${user.public_repos} </span>
                            <span class="label label-primary">Public Gists: ${user.public_gists}</span>
                            <span class="label label-success">Contributions: ${user.contributions}</span>
                            <span class="label label-info">Followers: ${user.followers}</span>
                            </div>
                        </div>
                      </div>
                    </div>          
                            `);
        })

    })

Problem is that this line $(document).on('click','#userPanel',function(user){console.log($(this).user.name)}); is giveing me error: Uncaught TypeError: Cannot read property ‘name’ of undefined;

Im struggle with this for a days and just dont know how to handle it

#2

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

1 Like
#3

Thank you , ill try better next time

#4

you need to bind the this to the $.each … as when you click the userpanel the this is bound to that … so you need to create a var eg var that = this and then use that instead o this lol … look at my simple repel on the index.js page it should make it more clear

1 Like
#5

Hey John thank you for your help!

#6