Receiving the term "extend" after triggering the button click event while iterating through a for-in loop

Question

Receiving the term "extend" after triggering the button click event while iterating through a for-in loop

I'm facing a challenge with my JSON structure:

people = [{"id":"0001","title":"Mr","name_first":"Bob","name_last":"Edwards","address1":"2 ford road","address2":null,"address3":null,"town":"Bedford","county":"Bedfordshire","postcode":"Mk16hd","telephone1":"01827485999","telephone2":null,"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3d303d1f3a323e3633713c30">[email protected]</a>"},
{"id":"8003","title":"Mr","name_first":"Joe","name_last":"Bloggs","address1":"186 Bath Road","address2":null,"address3":null,"town":null,"county":null,"postcode":null,"telephone1":"01827485648","telephone2":null,"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="80eaefe5c0e5ede1e9ecaee3efed">[email protected]</a>"},
{"id":"R005","title":"Mr","name_first":"Foo","name_last":"Bar","address1":null,"address2":null,"address3":null,"town":null,"county":null,"postcode":null,"telephone1":"01827485647","telephone2":null,"email":"<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5f3930301f3a32">[email protected]</a>"}];

Tackling this issue involves looping through the JSON and creating buttons:

for (var key in people) { 
    if (people.hasOwnProperty(key)) {
        var person = people[key];

        var button = document.createElement('button');
        button.innerHTML = '<span class="left-body">Edit</span>';
        button.onclick = function() { editPerson(key); return false; };
    }
}

However, I encounter an unexpected behavior when clicking the buttons:

function editPerson(index) {
    console.log(index);
    return false;
}

My question now is: How can I properly pass the key value of each JSON item into the editPerson() function?

javascript json for-loop

Answer 1

Answer №1

The reason behind this behavior is due to the concept of closure

for (var key in contacts) { 
    if (contacts.hasOwnProperty(key)) {
        var contact = contacts[key];

        var button = document.createElement('button');
        button.innerHTML = '<span class="left-body">Edit</span>';
        button.onclick = (function(key){
            return function() { editContact(key); return false; };
        })(key);
    }
}

Sample: Demo

Answer 2

The reason behind this behavior is due to the concept of closure

for (var key in contacts) { 
    if (contacts.hasOwnProperty(key)) {
        var contact = contacts[key];

        var button = document.createElement('button');
        button.innerHTML = '<span class="left-body">Edit</span>';
        button.onclick = (function(key){
            return function() { editContact(key); return false; };
        })(key);
    }
}

Sample: Demo

Answer 3

Answer №2

contacts is an array containing contact information. To loop through the properties of a single contact, you must specify it (e.g. using contact[0]). If you want to iterate through the properties of each contact, you need to loop through them as shown below:

for (var i=0;i<contacts.length;i++) {
    for(var key in contacts[i])

Another issue arises when handling button click events:

button.onclick = function() { editContact(key); return false; };

When you click the button, editContact gets called with the last assigned value of key. To maintain the correct value of key, you can use a closure like this:

(function() {
    var currentKey = key;
    button.onclick = function() { editContact(currentKey); return false; };
(());

Updated Solution: If you only need to iterate through the contacts and do not require support for older versions of Internet Explorer (< 9), you can utilize the following approach utilizing the `forEach` method:

contacts.forEach(function(element, index) {
    var button = document.createElement('button');
    button.innerHTML = '<span class="left-body">Edit</span>';
    button.onclick = function() { editContact(index); return false; };      
});

Answer 4

contacts is an array containing contact information. To loop through the properties of a single contact, you must specify it (e.g. using contact[0]). If you want to iterate through the properties of each contact, you need to loop through them as shown below:

for (var i=0;i<contacts.length;i++) {
    for(var key in contacts[i])

Another issue arises when handling button click events:

button.onclick = function() { editContact(key); return false; };

When you click the button, editContact gets called with the last assigned value of key. To maintain the correct value of key, you can use a closure like this:

(function() {
    var currentKey = key;
    button.onclick = function() { editContact(currentKey); return false; };
(());

Updated Solution: If you only need to iterate through the contacts and do not require support for older versions of Internet Explorer (< 9), you can utilize the following approach utilizing the `forEach` method:

contacts.forEach(function(element, index) {
    var button = document.createElement('button');
    button.innerHTML = '<span class="left-body">Edit</span>';
    button.onclick = function() { editContact(index); return false; };      
});

Answer 5

Answer №3

Each time the button is clicked, the editContact function is triggered with the most recent value assigned to the key. This ensures that the index of the JSON row is maintained and can be used for additional actions.

I implemented it in the following manner so that you can access all keys from your JSON:

function addButtons() {

    for (var key in contacts) {
        if (contacts.hasOwnProperty(key)) {
            var contact = contacts[key];
            var button = document.createElement('button');
            document.body.appendChild(button);
            button.setAttribute('id', key);
            button.innerHTML = '<span class="left-body">Edit</span>';
            button.onclick = function () {
                editContact(this.id);
                return false;
            };
        }
    }
}

function editContact(index) {
    for (var key in contacts[index]) {
        console.log("Key :" + key + " Value:" + contacts[index][key]);
    }
    return false;
}

This is how my HTML code appears:

<body onload="addButtons();"></body>

Answer 6

Each time the button is clicked, the editContact function is triggered with the most recent value assigned to the key. This ensures that the index of the JSON row is maintained and can be used for additional actions.

I implemented it in the following manner so that you can access all keys from your JSON:

function addButtons() {

    for (var key in contacts) {
        if (contacts.hasOwnProperty(key)) {
            var contact = contacts[key];
            var button = document.createElement('button');
            document.body.appendChild(button);
            button.setAttribute('id', key);
            button.innerHTML = '<span class="left-body">Edit</span>';
            button.onclick = function () {
                editContact(this.id);
                return false;
            };
        }
    }
}

function editContact(index) {
    for (var key in contacts[index]) {
        console.log("Key :" + key + " Value:" + contacts[index][key]);
    }
    return false;
}

This is how my HTML code appears:

<body onload="addButtons();"></body>

Receiving the term "extend" after triggering the button click event while iterating through a for-in loop

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to assign a series of radio buttons to an array within an Angular controller's model?

Exploring the usefulness of `bind(this)` within a ReactJS constructor

What is the process for adding a 3D object to a webpage and making it interactive with movement?

Combine Immer and NgRx reducer for improved state management

Implementing the Disabled Attribute on a Dynamically Generated Button Using React

How to pinpoint a particular element in a parsed json using Ruby

Using the Volley library, you can retrieve specific data from a list view by clicking on a particular item

Sort by label using the pipe operator in RxJS with Angular

Manipulating images separately using the canvas

How can one overcome CORS policies to retrieve the title of a webpage using JavaScript?

Kurento's WebRTC feature is currently experiencing difficulties with recording functionality

Interactive image grid with adjustable description field per image upon selection

When Mui Select is used with grouping, it automatically selects the first option as the default

Issues arise with selecting text and highlighting it in JavaScript functions

JS templating language inspired by Jinja

Passing variables in Redirect() without exposing them in the URL; a methodical approach

Changing the color of a face in Three.js

What is the best way to display a specific item in Pug rather than its entire collection?

Show HTML content using Bootstrap JS tooltip

Hide specific content while displaying a certain element