Creating a table from nested arrays in JavaScript using a foreach loop

Question

Creating a table from nested arrays in JavaScript using a foreach loop

Currently, I am attempting to loop through a set of data in order to populate my table. The data is being retrieved from my controller (CI3) and I have tried using JSON encoding like so:

{"1":{"2":["SOP","SOP 16","YES"]},"3":{"7":["SIP","SIP 12","YES"]},"4":{"18":["SAP","SAP 12","YES"]}}

This is the snippet of Javascript code where I attempted to loop through the data:

 const table_show = (data) => {
    console.log(data)
    document.getElementById('mabody').innerHTML = '';

    let str_table = '';
    data.forEach((ir_labs_1,key_ir_1) =>{
        str_table += '<tr id="data_ir_'+key_ir_1+'"><td>POSM</td><td>' + ir_labs_1 + '</td><td id="osa_'+key_ir_1+'">0</td></tr>';

    })
    document.getElementById('mabody').innerHTML = str_table;

}

However, upon running this code, I encounter the following error:

TypeError: data.forEach is not a function

I am uncertain as to what is causing this issue and how to resolve it. Can anyone provide guidance on how to rectify this problem?

javascript arrays json codeigniter foreach

Answer 1

Answer №1

The Object.entries() method is used to generate an array containing the key-value pairs of a specified object's properties that are enumerable.

Learn more about Object.entries()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div id='mabody'></div>

    <script type="text/javascript">
    const data = {"1":{"2":["SOP","SOP 16","YES"]},"3":{"7":["SIP","SIP 12","YES"]},"4":{"18":["SAP","SAP 12","YES"]}}

    const displayTable = (data) => {
    console.log(data)
    document.getElementById('mabody').innerHTML = '';

    let tableContent = '';
 
    for (const [key, value] of Object.entries(data)) {
         console.log(`${key}: ${value}`);
         tableContent += '<tr id="data_ir_'+key+'"><td>POSM</td><td>' + JSON.stringify(value, null, 2) + '</td><td id="osa_'+key+'">0</td></tr>';
    }

    document.getElementById('mabody').innerHTML = `<table>${tableContent}</table>`;
    }

    window.addEventListener('load', (event) => {
        console.log('page is loaded');
        displayTable(data)
    });
   </script>
</body>
</html>

Answer 2

The Object.entries() method is used to generate an array containing the key-value pairs of a specified object's properties that are enumerable.

Learn more about Object.entries()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
</head>
<body>
    <div id='mabody'></div>

    <script type="text/javascript">
    const data = {"1":{"2":["SOP","SOP 16","YES"]},"3":{"7":["SIP","SIP 12","YES"]},"4":{"18":["SAP","SAP 12","YES"]}}

    const displayTable = (data) => {
    console.log(data)
    document.getElementById('mabody').innerHTML = '';

    let tableContent = '';
 
    for (const [key, value] of Object.entries(data)) {
         console.log(`${key}: ${value}`);
         tableContent += '<tr id="data_ir_'+key+'"><td>POSM</td><td>' + JSON.stringify(value, null, 2) + '</td><td id="osa_'+key+'">0</td></tr>';
    }

    document.getElementById('mabody').innerHTML = `<table>${tableContent}</table>`;
    }

    window.addEventListener('load', (event) => {
        console.log('page is loaded');
        displayTable(data)
    });
   </script>
</body>
</html>

Creating a table from nested arrays in JavaScript using a foreach loop

Answer №1

Similar questions

Error in AJAX transmission

Retrieve the original state of a ReactJs button from the database

Struggling to locate an element with jQuery's closest() method?

Check if a given string conforms to the JSONATA expression format

Can you confirm if this is a valid JSONObject? If it is, could you please explain how I can iterate through it to access all

What is the process for inputting data into a Inertia component?

Using a dictionary to replace values in a Pandas DataFrame column with an array of new entries

Combining PHP and SQL to group query results into an array

Don't forget to save the toggleClass state to local storage in jQuery so it persists after

What are the best tools to develop a browser-based 2D top-down soccer simulation?

Having trouble with the dropdown feature on AngularJs?

Tips for restricting camera movement in threejs

Tips for extracting a specific field value from a JSON response

Exceeded maximum file size event in Dropzone

Guide on transforming data into the preferred format and saving it to a file using Python and Apache Beam

Utilizing an array element within a conditional statement

Triggering functions when the mouse wheel is in motion

The JSX snippet accurately displays the expected value on some pages, but displays an incorrect value on other pages

Create a configuration featuring filter options similar to Notion's functionality

Exporting a named export for every HTTP method is the way to go with NextJs