Reconfigure the code to process object data instead of an array in JavaScript

Question

Reconfigure the code to process object data instead of an array in JavaScript

Recently, I wrote a piece of code that is capable of exporting data into a CSV file. The data format it reads is structured as follows:

var data = [
   ['one', 'one is the first'],
   ['two', 'two is the second'],
   ['three', 'this is the third']
];

Below is the function responsible for executing this task:

function download_csv() {
    var csv = 'Name,Title\n';
    data.forEach(function(row) {
            csv += row.join(',');
            csv += "\n";
    });

    console.log(csv);
    var hiddenElement = document.createElement('a');
    hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    hiddenElement.target = '_blank';
    hiddenElement.download = 'data.csv';
    document.getElementById('export_btn_container').appendChild(hiddenElement);
    hiddenElement.click();
}

Here is the corresponding HTML markup:

<button onclick="download_csv()">Download CSV</button>
<div id="export_btn_container" style="display:none;"></div>

Although the code above successfully caters to the provided format, the initial structure of my data looks like this:

"users":[
    {
        "id":"34",
        "name":"namehere",
        "user":{
            "id":"56",
            "username":"usernamehere",
            "firstName":"firstnamehere",
            "lastName":"lastnamehere"
        },
        "active":"yes"
    }
]}

The question at hand is: how can I adapt the existing code to work seamlessly with the new data structure shown above?

javascript

Answer 1

Answer №1

To extract the necessary information, you have to loop through the users array in the data object and access each property individually.

var data = {
  "users": [{
    "id": "34",
    "name": "namehere",
    "user": {
      "id": "56",
      "username": "usernamehere",
      "firstName": "firstnamehere",
      "lastName": "lastnamehere"
    },
    "active": "yes"
  }]
}

function download_csv() {
  var csv = 'Id,Name,Username,Firstname,Lastname,Active\n';
  data.users.forEach(function(user) {
    csv += user.id + ",";
    csv += user.name + ",";
    csv += user.user.username + ",";
    csv += user.user.firstName + ",";
    csv += user.user.lastName + ",";
    csv += user.active;
    csv += "\n";
  });

  console.log(csv);
  var hiddenElement = document.createElement('a');
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
  hiddenElement.target = '_blank';
  hiddenElement.download = 'data.csv';
  document.getElementById('export_btn_container').appendChild(hiddenElement);
  hiddenElement.click();
}

<button onclick="download_csv()">Download CSV</button>
<div id="export_btn_container" style="display:none;"></div>

If you are unsure about the keys' names, you can use the following code snippet:

var data = {
  "users": [{
    "id": "34",
    "name": "namehere",
    "user": {
      "id": "56",
      "username": "usernamehere",
      "firstName": "firstnamehere",
      "lastName": "lastnamehere"
    },
    "active": "yes"
  }]
}

function download_csv() {
  var csv = 'Id,Name,ID,Username,Firstname,Lastname,Active\n';
  data.users.forEach(function(user) {
    Object.keys(user).forEach(function(key){
      if(typeof user[key] === 'object'){
        Object.keys(user[key]).forEach(function(secondKey){
          csv += user[key][secondKey] + ",";
        })
      }else{
       csv += user[key] + ","; 
      }  
    });
    csv = csv.slice(0, -1);
    csv += "\n";
  });
  console.log(csv);
  var hiddenElement = document.createElement('a');
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
  hiddenElement.target = '_blank';
  hiddenElement.download = 'data.csv';
  document.getElementById('export_btn_container').appendChild(hiddenElement);
  hiddenElement.click();
}

<button onclick="download_csv()">Download CSV</button>
<div id="export_btn_container" style="display:none;"></div>

Answer 2

To extract the necessary information, you have to loop through the users array in the data object and access each property individually.

var data = {
  "users": [{
    "id": "34",
    "name": "namehere",
    "user": {
      "id": "56",
      "username": "usernamehere",
      "firstName": "firstnamehere",
      "lastName": "lastnamehere"
    },
    "active": "yes"
  }]
}

function download_csv() {
  var csv = 'Id,Name,Username,Firstname,Lastname,Active\n';
  data.users.forEach(function(user) {
    csv += user.id + ",";
    csv += user.name + ",";
    csv += user.user.username + ",";
    csv += user.user.firstName + ",";
    csv += user.user.lastName + ",";
    csv += user.active;
    csv += "\n";
  });

  console.log(csv);
  var hiddenElement = document.createElement('a');
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
  hiddenElement.target = '_blank';
  hiddenElement.download = 'data.csv';
  document.getElementById('export_btn_container').appendChild(hiddenElement);
  hiddenElement.click();
}

<button onclick="download_csv()">Download CSV</button>
<div id="export_btn_container" style="display:none;"></div>

If you are unsure about the keys' names, you can use the following code snippet:

var data = {
  "users": [{
    "id": "34",
    "name": "namehere",
    "user": {
      "id": "56",
      "username": "usernamehere",
      "firstName": "firstnamehere",
      "lastName": "lastnamehere"
    },
    "active": "yes"
  }]
}

function download_csv() {
  var csv = 'Id,Name,ID,Username,Firstname,Lastname,Active\n';
  data.users.forEach(function(user) {
    Object.keys(user).forEach(function(key){
      if(typeof user[key] === 'object'){
        Object.keys(user[key]).forEach(function(secondKey){
          csv += user[key][secondKey] + ",";
        })
      }else{
       csv += user[key] + ","; 
      }  
    });
    csv = csv.slice(0, -1);
    csv += "\n";
  });
  console.log(csv);
  var hiddenElement = document.createElement('a');
  hiddenElement.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
  hiddenElement.target = '_blank';
  hiddenElement.download = 'data.csv';
  document.getElementById('export_btn_container').appendChild(hiddenElement);
  hiddenElement.click();
}

<button onclick="download_csv()">Download CSV</button>
<div id="export_btn_container" style="display:none;"></div>

Reconfigure the code to process object data instead of an array in JavaScript

Answer №1

Similar questions

"Bootstrap's modal-backdrop element presents a striking fade effect as it

Is it possible to load conditionally if the browser is switched to Developer Mode?

Make sure to leave a space after a period in a sentence, but do

Searching for similar but not identical results using Knex.js

Remove the pop-up using its unique identifier, element, or style class

Can someone please help me understand why my CSS transform scale isn't functioning properly?

Solution for Organizing Tables

Separate every variable with a comma, excluding the final one, using jQuery

Identify the specific element using a designated data attribute

The "checked" property is absent in the ASP.NET checkbox within the gridview

Converting XML to JSON in a Node.js application

What steps can I take to prompt a ZMQ Router to throw an error when it is occupied?

When transferring a PHP array into a JS array, each letter of the values within the array becomes separated into its own element

Button activated on second click

Is there a way to sort through a JSON object using JavaScript?

Retrieve a specific value from an array within Firestore

React Component that closes when it loses focus

JavaScript causing values to disappear when the page refreshes

Clicking on an element triggers the addition of a class, and the newly

Finding a workaround for the absence of a leftToggle feature in ListItem component of Material-UI