Cannot make JSON text out of javascript object

Question

I'd like to convert this object that I receive from server to a JSON file so that I can use it in d3.js chart:

data = {
   "dog ":"5",
   "cat ":"4",
   "fish ":"12",
}

The output should be:

{    
    "name" : "animal",
    "children" : [
        {"name":"dog", "value": 5},
        {"name":"cat", "value": 4},
        {"name":"fish", "value": 10}
    ]
}

What I came up with is:

   var jsonText = [] ;
   for ( key in data) {
  jsonText.push({name : key.trim(), value : parseInt(data[key])});
 }

But when I try to print out the object, I receive:

[object Object],[object Object],[object Object]

In addition to that I have no clue how to add other attributes to the JSON file. So appreciate your hints.

Where are you getting the name:animal data from? The data I'm seeing from your snippet never tells you that. — Oscar Godson
– Oscar Godson, Commented Jul 7, 2018 at 6:26
@OscarGodson True. that's part of the problem. I have no clue how to add it to the json from the javascript object. — Babr
– Babr, Commented Jul 7, 2018 at 6:28

Ankit Agarwal · Accepted Answer · 2018-07-07 06:29:49Z

2

You can use Object.keys(data) and loop through the key to get the desired object structure.

var data = {
 "dog ":"5",
 "cat ":"4",
 "fish ":"12",
};
var res = {
  name: "animal",
  children: []
};
Object.keys(data).forEach((key)=>{
  res.children.push(
   {name:key.trim(), value: parseInt(data[key])}
  );
});

console.log(res);

answered Jul 7, 2018 at 6:29

Ankit Agarwal

30.8k5 gold badges41 silver badges63 bronze badges

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

1 Comment

connexo Over a year ago

Why not simply use for (key in data)? As a bonus, that would also work for non-enumerable objects.

CertainPerformance · Accepted Answer · 2018-07-07 06:34:35Z

2

You're almost there (the array is formatted correctly), but you need the resulting array to be the value of the children property of the object. It would also be a bit easier to use Object.entries and map, which tranforms an array into another array based on the same elements:

const data = {
   "dog ":"5",
   "cat ":"4",
   "fish ":"12",
};
const children = Object.entries(data)
  .map(([name, value]) => ({ name: name.trim(), value: Number(value) }));
const output = { name: 'animal', children };
console.log(output);

edited Jul 7, 2018 at 6:34

answered Jul 7, 2018 at 6:30

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

1 Comment

Babr Over a year ago

Nice! Just need the values to be int.

connexo · Accepted Answer · 2018-07-07 06:39:31Z

2

Assuming you're manually adding a key like animal this should work and the values should be ints.

var data = {
   "dog ":"5",
   "cat ":"4",
   "fish ":"12",
}

var children = Object.keys(data).map((key) => {
  return {
    name: key.trim(),
    value: parseInt(data[key])
  }
})

let result = JSON.stringify({
  name: 'animal',
  children
})

console.log(result);

That will return

{"name":"animal","children":[{"name":"dog ","value":5},{"name":"cat ","value":4},{"name":"fish ","value":12}]}

edited Jul 7, 2018 at 6:39

connexo

57.2k15 gold badges112 silver badges149 bronze badges

answered Jul 7, 2018 at 6:30

Oscar Godson

32.9k42 gold badges129 silver badges207 bronze badges

1 Comment

Oscar Godson Over a year ago

@Babr how about this?

Kedar Rudre · Accepted Answer · 2018-07-07 06:30:24Z

1

Try - console.log(JSON.stringify(jsonText))

answered Jul 7, 2018 at 6:30

Kedar Rudre

1447 bronze badges

Comments

brk · Accepted Answer · 2018-07-07 06:31:45Z

1

Create an object with children key and push value to it

let data = {
  "dog ": "5",
  "cat ": "4",
  "fish ": "12",
}

let newObj = {
  "name": "animal",
  "children": []
}
for (let keys in data) {
  newObj.children.push({
    name: keys.trim(),
    value: parseInt(data[keys], 10)
  });
}
console.log(newObj)

answered Jul 7, 2018 at 6:31

brk

50.3k10 gold badges59 silver badges85 bronze badges

Comments

jman93 · Accepted Answer · 2018-07-07 06:37:56Z

1

You could do something like this

    const data = {
       "dog ":"5",
       "cat ":"4",
       "fish ":"12",
    }

    Object.keys(data).reduce((obj, animal) => ({
      ...obj,
      children: [
          ...obj.children,
          {
              name: animal,
              value: data[animal]
          }
      ]
    }), {name: "animal", children: []})

    console.log(JSON.stringify(obj))

This is a cleaner way to get the desired results in my opinion

answered Jul 7, 2018 at 6:37

jman93

3673 silver badges9 bronze badges

Comments

connexo · Accepted Answer · 2018-07-07 06:46:51Z

1

You can just iterate over the data object using for..in and push prop: value pair objects into you children array:

const data = {
   "dog ": "5",
   "cat ": "4",
   "fish ": "12",
}

let obj = {
  name: "animal",
  children: []
}

for (prop in data) {
  let animal = {}
  animal[prop.trim()] = Number(data[prop])
  obj.children.push(animal)
}

console.log(JSON.stringify(obj))

edited Jul 7, 2018 at 6:46

answered Jul 7, 2018 at 6:36

connexo

57.2k15 gold badges112 silver badges149 bronze badges

Collectives™ on Stack Overflow

Cannot make JSON text out of javascript object

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related