Add keys to collection of objects in JavaScript

Question

I have an array of objects in JavaScript like this:

[
  {A:10},
  {B:20},
  {C:30}
]

I'm trying to convert this into an array of objects that would appear like this (to work with d3.js):

[
  {word: "A", weight: 10},
  {word: "B", weight: 20},
  {word: "C", weight: 30}
]

I'm able to get the initial array of objects by simply doing:

var wordData = [];
for (var i = 0; i < words.length; i++) {
    if (wordData.hasOwnProperty(words[i])) {
        wordData[words[i]] += 1;
    } else {
        wordData[words[i]] = 1;
    }
}

This just sets up a simple hash, but doesn't add the keys before each one.

Edit

JSFiddle for simplicity.

But {A, 10} doesn't look like a valid javascript, it should be {A:10}. — nicael
– nicael, Commented Jan 20, 2016 at 17:06
occurrence count - your expected output doesn't reflect that — thefourtheye
– thefourtheye, Commented Jan 20, 2016 at 17:10
Sure it does :) Just know that the weight value is the number of times that key (word) has occurred through iterating an array of words. — mariocatch
– mariocatch, Commented Jan 20, 2016 at 17:11

nicael · Accepted Answer · 2016-01-20 17:15:33Z

3

var wordData = [
  {A: 10},
  {B: 20},
  {C: 30}
];

var result = wordData.map(function (item) {
    var key = Object.keys(item)[0];
    return {word: key, weight: item[key]};
});

edited Jan 20, 2016 at 17:15

nicael

19.1k13 gold badges65 silver badges93 bronze badges

answered Jan 20, 2016 at 17:10

Tomalak

339k68 gold badges547 silver badges635 bronze badges

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

6 Comments

mariocatch Over a year ago

This is probably the answer, but I can't get it to work. I don't understand why my source collection wordData has a length of one when I test it locally. I'm updating my question with a new edit that shows what the Chrome inspector is showing it as. It's probably because of the way I'm creating the wordData object. Edit 3 is the newest edit.

Tomalak Over a year ago

@mariocatch Instead of a screenshot you might want to post the output of JSON.stringify(wordData, null, 2)...

Tomalak Over a year ago

Well then your initial assumption ("I have an array of objects") is wrong. ;) Show the code that constructs your "array".

mariocatch Over a year ago

I've edited the long question, and added a jsfiddle which reproduces the issue.

Tomalak Over a year ago

Well, change var wordData = []; to var wordData = {};, obviously. ;)

|

Jakir Hossain · Accepted Answer · 2016-01-20 18:39:27Z

1

Try below code. I have tried with for loop.

var wordData =[
{A: 10},
{B: 20},
{C: 30}
];

var results = [];
for (var prop in wordData) {                    
    var key = Object.keys(wordData[prop])[0];
    result = {word: key, weight: wordData[prop][key]};
    results.push(result);
}

var json_result = JSON.stringify(results, null, 2);
console.log(json_result);

Output

[
  {
    "word": "A",
    "weight": 10
  },
  {
    "word": "B",
    "weight": 20
  },
  {
    "word": "C",
    "weight": 30
  }
]

or

var json_result = JSON.stringify(results); // without null
console.log(json_result);

output

[{"word":"A","weight":10},{"word":"B","weight":20},{"word":"C","weight":30}]

<div id="data">
  Run the code below
</div>

var wordData = {}; // Edit, use {} intead of [] here.
for (var i = 0; i < words.length; i++) {
    // The problem is definitely in this loop.
  if (wordData.hasOwnProperty(words[i])) {
    wordData[words[i]] += 1;
  } else {
    wordData[words[i]] = 1;
  }
}

var results = [];
for (var prop in wordData) {  
    result = {word: prop, weight: wordData[prop]};
    results.push(result);
}
var json_result = JSON.stringify(results, null, 2);
document.getElementById('data').innerHTML = json_result;

Demo

edited Jan 20, 2016 at 18:39

answered Jan 20, 2016 at 17:33

Jakir Hossain

2,51720 silver badges24 bronze badges

1 Comment

mariocatch Over a year ago

I've reproduced your code here: jsfiddle.net/mariocatch/peayr88z/5 It's providing empty objects in the array at the moment in that example.

Collectives™ on Stack Overflow

Add keys to collection of objects in JavaScript

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related