Javascript: How to convert an JSON arrays in array into an CSV file?

Question

I'm struggeling with my JSON file here... This is what I get from my processing .php-file as a response:

{"1":{"Nachname":"Stromberg","Vorname":"Bernd", 
"Benutzername":"strombergbernd12","Password":"Xrz5Bv6A"},
"2":{"Nachname":"Heisterkamp","Vorname":"Ernie", 
"Benutzername":"heisterkampernie12","Password":"aOq24EpF"}}

Now, I want to build from this JSON array a csv file. In the first row the csv file should mention the headers Nachname, Vorname, Benutzername and Password and then list in the following rows the rest of the data.

I cant handle that, can you help me?

What do you mean, "I can't handle that"? What have you tried? — user3483203
– user3483203, Commented Jan 18, 2018 at 15:54
well, I tried different codes of converting arrays and json's to csv files, but all I get is junk or nothing in the csv in the end. — Dawko
– Dawko, Commented Jan 18, 2018 at 15:54
You start from a JSON. CSV are Comma Separated Values. Therefore, you need to transform your data before exporting it to CSV. What's the expected output? — Jeremy Thille
– Jeremy Thille, Commented Jan 18, 2018 at 15:55
You need to include the different codes you've tried on your post. — Eddie
– Eddie, Commented Jan 18, 2018 at 15:55
Here is a hint, to get the headers for your csv, you can use Object.keys() — user3483203
– user3483203, Commented Jan 18, 2018 at 15:56

Apolo · Accepted Answer · 2018-01-18 16:31:41Z

8

once you have your json as text you parse it:

var json = JSON.parse(jsonAsText);

transform it to an array:

json = Object.values(json);

init your result:

var csv = "";

keep header keys somewhere:

var keys = (json[0] && Object.keys(json[0])) || [];

write header row

csv += keys.join(',') + '\n';

iterate and put everything in csv

for (var line of json) {
  csv += keys.map(key => line[key]).join(',') + '\n';
}

Your csv content should be ready

var json = {
  "1": {
    "Nachname": "Stromberg",
    "Vorname": "Bernd",
    "Benutzername": "strombergbernd12",
    "Password": "Xrz5Bv6A"
  },
  "2": {
    "Nachname": "Heisterkamp",
    "Vorname": "Ernie",
    "Benutzername": "heisterkampernie12",
    "Password": "aOq24EpF"
  }
}

function toCSV(json) {
  json = Object.values(json);
  var csv = "";
  var keys = (json[0] && Object.keys(json[0])) || [];
  csv += keys.join(',') + '\n';
  for (var line of json) {
    csv += keys.map(key => line[key]).join(',') + '\n';
  }
  return csv;
}

console.log(toCSV(json));

Note: If you can, switch your json to Array syntax:

[
  {
    "Nachname":"Stromberg",
    "Vorname":"Bernd",
    "Benutzername":"strombergbernd12",
    "Password":"Xrz5Bv6A"
  },
  {
    "Nachname":"Heisterkamp",
    "Vorname":"Ernie", 
    "Benutzername":"heisterkampernie12",
    "Password":"aOq24EpF"
  }
]

and then remove this line:

json = Object.values(json);

edited Jan 18, 2018 at 16:31

answered Jan 18, 2018 at 16:14

Apolo

4,0512 gold badges26 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Dawko Over a year ago

wow, you're a genius! I'm not used to json & javascript at all. Sorry for my dumb question - must have been pretty obvious to you. Thank you so much!

Apolo Over a year ago

Note that json = Object.values(json); is a waste of ressource. If you can you should use the array syntax in your json (["item1", "item2", ...]) and remove this line

Dawko Over a year ago

$header = array('Nachname', 'Vorname'); $results[$number] += array_combine($header, array($usernachname, $uservorname)); $results[$number] += array_combine($header, array($postuname, $pass));

How can I build your kind of Array? I dont get how to build it, and without the indexes, how can I call one specific item? Wait, actually I dont need to call one specific item...

Dawko Over a year ago

Got it through a second array:

$user = array(); $user +=  ['Nachname' => $usernachname];  $user +=  ['Vorname' => $uservorname];	$user +=  ['Benutzername' => $postuname]; 	$user +=  ['Password' => $pass]; 	$results[] = $user;

Dawko Over a year ago

Had to replace your "for(var line of json)" to make it IE11 compatible. Danny's code helped me: for (var item in json) { csv += Object.values(json[item]).join(","); csv += "\n"; }

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2018-01-18 16:32:40Z

0

You could use: Object.keys() and Object.values().

Something like this:

(function() {
  var data = {
    "1": {
      "Nachname": "Stromberg",
      "Vorname": "Bernd",
      "Benutzername": "strombergbernd12",
      "Password": "Xrz5Bv6A"
    },
    "2": {
      "Nachname": "Heisterkamp",
      "Vorname": "Ernie",
      "Benutzername": "heisterkampernie12",
      "Password": "aOq24EpF"
    }
  };
  var csv = Object.keys(data[Object.keys(data)[0]]).join(","); // Header columns.
  csv += "\n";
  for (var item in data) {
    csv += Object.values(data[item]).join(",");
    csv += "\n";
  }
  console.log(csv);
}());

.as-console-wrapper {
  position: relative;
  top: 0;
}

The result will be:

edited Jan 18, 2018 at 16:32

answered Jan 18, 2018 at 16:14

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

3 Comments

Apolo Over a year ago

data[1] will fail with a single item ;)

Danny Fardy Jhonston Bermúdez Over a year ago

@Apolo Fixed it. Thank you for the observation.

Dawko Over a year ago

@DannyFardyJhonstonBermúdez took your for (var item in json) line to make it IE11 compatible - thank you!

Collectives™ on Stack Overflow

Javascript: How to convert an JSON arrays in array into an CSV file?

2 Answers 2

5 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related