Sending the current object from a forEach loop as an argument to a function

Question

Sending the current object from a forEach loop as an argument to a function

There seems to be an issue with an object structure like the following:

let clients = [{
  "id": 1,
  "first_name": "Felipe",
  "last_name": "Aiken",
  "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d6b0b7bfbdb3b8e696e5e0e6f8b5b8">[email protected]</a>",
  "gender": "Male",
  "ip_address": "13.189.73.39"
}, {
  "id": 2,
  "first_name": "Renell",
  "last_name": "Andreone",
  "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="493b28272d3b2c26272c780921203a3d283d3a672a2624">[email protected]</a>",
  "gender": "Female",
  "ip_address": "196.153.244.124"
}];

If you try using it in a forEach loop as shown below:

clients.forEach(function(client) {
    console.log(client);
    let tbody = document.querySelector('tbody');
    let newObj = {
        'name': 'client.first_name'
    };
    tbody.innerHTML = tbody.innerHTML + '\
        <tr>\
            <td>' + client.id + '</td>\
            <td>' + client.first_name + '</td>\
            <td>' + client.last_name + '</td>\
            <td>' + client.email + '</td>\
            <td>' + client.gender + '</td>\
            <td><button onclick="setClientInfo(' + (newObj) + ')" class="btn btn-primary">View</td>\
        </tr>\
    ';
});

Upon clicking the "View" button for any item, an "Unexpected error" message shows up in the console referencing this code snippet:

setClientInfo([object Object])

The simple setClientInfo function is defined as follows:

function setClientInfo(client) {
    console.log(client);
}

Any assistance on this matter would be highly appreciated.

Cheers!

javascript json object

Answer 1

Answer №1

Our buddy @Archer mentioned in the comments to pass the client.id to the function setClientInfo, and within that function, locate the required client based on that id. Utilize the code snippet below for assistance.

let clients = [{
  "id": 1,
  "first_name": "Felipe",
  "last_name": "Aiken",
  "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9b9c94969893cdbdcecbcdd39e93">[email protected]</a>",
  "gender": "Male",
  "ip_address": "13.189.73.39"
}, {
  "id": 2,
  "first_name": "Renell",
  "last_name": "Andreone",
  "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abd9cac5cfd9cec4c5ce9aebc3c2d8dfcadfd885c8c4c6">[email protected]</a>",
  "gender": "Female",
  "ip_address": "196.153.244.124"
}];

clients.forEach(function(client) {
    let tbody = document.querySelector('tbody');
    let newObj = {
        'name': 'client.first_name'
    };
    tbody.innerHTML = tbody.innerHTML + '\
        <tr>\
            <td>' + client.id + '</td>\
            <td>' + client.first_name + '</td>\
            <td>' + client.last_name + '</td>\
            <td>' + client.email + '</td>\
            <td>' + client.gender + '</td>\
            <td><button onclick="setClientInfo(' + client.id + ')" class="btn btn-primary">View</td>\
        </tr>\
    ';
});

function setClientInfo(clientId){
  console.log(clientId)
  var client = clients.find(x => x.id == clientId);
  console.log(client)
}

<table>
  <tbody></tbody>
</table>

A different approach could involve constructing elements without using a string and appending them via innerHTML. Instead, create the element directly using document.createElement(), then assign the listener by passing the object as a parameter. See example below:

let clients = [{
      "id": 1,
      "first_name": "Felipe",
      "last_name": "Aiken",
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c2c5cdcfc1ca94e49792948ac7ca">[email protected]</a>",
      "gender": "Male",
      "ip_address": "13.189.73.39"
    }, {
      "id": 2,
      "first_name": "Renell",
      "last_name": "Andreone",
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e092818e8492858f8e85d1a088899394819493ce838f8d">[email protected]</a>",
      "gender": "Female",
      "ip_address": "196.153.244.124"
    }];

    clients.forEach(function(client) {
        let tbody = document.querySelector('tbody');
        let newObj = {
            'name': 'client.first_name'
        };
        var trElem = document.createElement("tr");

        // LOOP THROUGH ALL CLIENT PROPERTIES
        for (var prop in client){
            var tdElem =  document.createElement("td");
            tdElem.textContent = client[prop];
            trElem.append(tdElem);            
        }      

        // Create the last td with the Button
        var tdClick = document.createElement("td");
        var btn = document.createElement("button")
        tdClick.append(btn);
        btn.onclick = setClientInfo.bind(this, client);
        btn.className = "btn btn-primary";
        btn.textContent = "View";
        trElem.append(tdClick);
        
        // Append to table body
        tbody.append(trElem);
    });

    function setClientInfo(client){
      console.log(client);
    }

<table>
  <tbody></tbody>
</table>

Answer 2

Our buddy @Archer mentioned in the comments to pass the client.id to the function setClientInfo, and within that function, locate the required client based on that id. Utilize the code snippet below for assistance.

let clients = [{
  "id": 1,
  "first_name": "Felipe",
  "last_name": "Aiken",
  "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fd9b9c94969893cdbdcecbcdd39e93">[email protected]</a>",
  "gender": "Male",
  "ip_address": "13.189.73.39"
}, {
  "id": 2,
  "first_name": "Renell",
  "last_name": "Andreone",
  "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="abd9cac5cfd9cec4c5ce9aebc3c2d8dfcadfd885c8c4c6">[email protected]</a>",
  "gender": "Female",
  "ip_address": "196.153.244.124"
}];

clients.forEach(function(client) {
    let tbody = document.querySelector('tbody');
    let newObj = {
        'name': 'client.first_name'
    };
    tbody.innerHTML = tbody.innerHTML + '\
        <tr>\
            <td>' + client.id + '</td>\
            <td>' + client.first_name + '</td>\
            <td>' + client.last_name + '</td>\
            <td>' + client.email + '</td>\
            <td>' + client.gender + '</td>\
            <td><button onclick="setClientInfo(' + client.id + ')" class="btn btn-primary">View</td>\
        </tr>\
    ';
});

function setClientInfo(clientId){
  console.log(clientId)
  var client = clients.find(x => x.id == clientId);
  console.log(client)
}

<table>
  <tbody></tbody>
</table>

A different approach could involve constructing elements without using a string and appending them via innerHTML. Instead, create the element directly using document.createElement(), then assign the listener by passing the object as a parameter. See example below:

let clients = [{
      "id": 1,
      "first_name": "Felipe",
      "last_name": "Aiken",
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c2c5cdcfc1ca94e49792948ac7ca">[email protected]</a>",
      "gender": "Male",
      "ip_address": "13.189.73.39"
    }, {
      "id": 2,
      "first_name": "Renell",
      "last_name": "Andreone",
      "email": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e092818e8492858f8e85d1a088899394819493ce838f8d">[email protected]</a>",
      "gender": "Female",
      "ip_address": "196.153.244.124"
    }];

    clients.forEach(function(client) {
        let tbody = document.querySelector('tbody');
        let newObj = {
            'name': 'client.first_name'
        };
        var trElem = document.createElement("tr");

        // LOOP THROUGH ALL CLIENT PROPERTIES
        for (var prop in client){
            var tdElem =  document.createElement("td");
            tdElem.textContent = client[prop];
            trElem.append(tdElem);            
        }      

        // Create the last td with the Button
        var tdClick = document.createElement("td");
        var btn = document.createElement("button")
        tdClick.append(btn);
        btn.onclick = setClientInfo.bind(this, client);
        btn.className = "btn btn-primary";
        btn.textContent = "View";
        trElem.append(tdClick);
        
        // Append to table body
        tbody.append(trElem);
    });

    function setClientInfo(client){
      console.log(client);
    }

<table>
  <tbody></tbody>
</table>

Answer 3

Answer №2

When the onclick handler is rendered as a string in HTML, an object literal is usually displayed as [object Object]. You can test this by running the following code in the developer console:

"" + {key: "value"}

The result will look like:

<button onclick="setClientInfo([object Object])" />

This type of handler is not valid JavaScript and will trigger an error. If you insist on including an object value inline in your HTML, you can convert the object to a string like this:

let newObj = "{'name': 'client.first_name'}";

Then your handler will appear as:

<button onclick="setClientInfo({'name': 'client.first_name'})" />

However, it's generally not recommended. It's better practice to just pass an identifier to the click handler function and use that to locate the necessary object in your JavaScript code.

Answer 4

When the onclick handler is rendered as a string in HTML, an object literal is usually displayed as [object Object]. You can test this by running the following code in the developer console:

"" + {key: "value"}

The result will look like:

<button onclick="setClientInfo([object Object])" />

This type of handler is not valid JavaScript and will trigger an error. If you insist on including an object value inline in your HTML, you can convert the object to a string like this:

let newObj = "{'name': 'client.first_name'}";

Then your handler will appear as:

<button onclick="setClientInfo({'name': 'client.first_name'})" />

However, it's generally not recommended. It's better practice to just pass an identifier to the click handler function and use that to locate the necessary object in your JavaScript code.

Sending the current object from a forEach loop as an argument to a function

Answer №1

Answer №2

Similar questions

A guide on showcasing a MultiPolygon GeoJSON on a Leaflet map

What is the maximum number of JSON responses that can be handled by AJAX?

Adjusting image dimensions dynamically using JavaScript based on screen size

Can a function be invoked using a variable as a parameter in JavaScript?

When the audio on the device is in use, the video will not play and vice versa

Establish Mongoose query requirement according to the property of the document

Alert function or append method is not functioning properly on the Document Object Model (DOM

What is the process for obtaining a page slug within the app directory of Next.js?

Tips on creating a parameterized SQL query within Javascript

Is it possible to identify when text has been successfully rendered using Javascript and SVG?

JavaScript Algorithm for Pyramids

Sending an Array from Javascript to Node.js

Ways to permanently change a javascript array object

How can I incorporate the "onClick()" function within an ajax call, while still utilizing the data returned in the success message?

Attempting to replicate the functionality of double buffering using JavaScript

Listing Field Names in Swagger

Angular: A guide to binding to the required/ngRequired attribute

Issue retrieving data from JSON in Android app

Maintain your position on the current page when refreshing Angular 4

Guidelines for retrieving specific json information using PHP