Javascript populate array based on JSON object

Question

I have a JSON object as follows:

var testJSON = [
 { "AssetA": "asset_a", "AssetB": "asset_b" },
 { "AssetA": "asset_a", "AssetB": "asset_b" },
 { "AssetA": "asset_c", "AssetB": "asset_d" },
{ "AssetA": "asset_c", "AssetB": "asset_e" }];

What I want to do is step through the object and add repeating keys to another array, usedAssets. Here is my code so far:

var usedAssets = [];
for (var key in testJSON) {
 console.log("Current key: " + key + " " + "value: : " + testJSON[key].AssetA);
 console.log("Current key: " + key + " " + "value: : " + testJSON[key].AssetB);
 // check if in array
 if ((isInArray(testJSON[key].AssetA, usedAssets) || isInArray(testJSON[key].AssetB, usedAssets))) {
 break;
 }
 else {
 usedAssets.push(testJSON[key].AssetA);
 usedAssets.push(testJSON[key].AssetB);
 }
}
console.log(usedAssets);
function isInArray(value, array) {
 return array.indexOf(value) > -1;
}

However, my output of that is just an array with asset_a and asset_b. The usedAssets array should contain asset_a, asset_b, and asset_c. My end goal is to be able to determine at the end of the iteration, that I used asset_a only once, asset_b only once, and asset_c only once.

• yBrodsky: testJSON is an array. To iterate you do testJSON.forEach(function(each){})
• Ruan Mendes: @user1655756 That's true, but not the source of the bug in the case...
• Jonas Wilms: Simply remove the break; that kills the forloop wich is not what you want
• Béranger: You should use continue instead of break
• Barmar: Why shouldn't the resul include asset_d?

Answer 1

Basically, you could iterate all elements of the array and all properties of the object and count the occurence.

var testJSON = [{ "AssetA": "asset_a", "AssetB": "asset_b" }, { "AssetA": "asset_a", "AssetB": "asset_b" }, { "AssetA": "asset_c", "AssetB": "asset_d" }, { "AssetA": "asset_c", "AssetB": "asset_e" }],
 count = {};
testJSON.forEach(o => Object.keys(o).forEach(k => count[o[k]] = (count[o[k]] || 0) + 1));
console.log(count);
console.log(Object.keys(count).filter(k => count[k] > 1));

.as-console-wrapper { max-height: 100% !important; top: 0; }

ES5

var testJSON = [{ "AssetA": "asset_a", "AssetB": "asset_b" }, { "AssetA": "asset_a", "AssetB": "asset_b" }, { "AssetA": "asset_c", "AssetB": "asset_d" }, { "AssetA": "asset_c", "AssetB": "asset_e" }],
 count = {};
testJSON.forEach(function (o) {
 Object.keys(o).forEach(function (k) {
 count[o[k]] = (count[o[k]] || 0) + 1;
 });
});
console.log(count);
console.log(Object.keys(count).filter(function (k) {
 return count[k] > 1;
}));

.as-console-wrapper { max-height: 100% !important; top: 0; }

• CircAnalyzer: the previous answers also utilize the '=>' notation, but I get a syntax an error at those occurrences when I copy the snippet to my project.
• Nina Scholz: try the more traditional coding.
• CircAnalyzer: would you please provide an example?
• Nina Scholz: please see part ES5

Answer 2

This snippet takes your array and reduces it to the seen values.

 var testJSON = [
 { "AssetA": "asset_a", "AssetB": "asset_b" },
 { "AssetA": "asset_a", "AssetB": "asset_b" },
 { "AssetA": "asset_c", "AssetB": "asset_d" },
 { "AssetA": "asset_c", "AssetB": "asset_e" }];
 var seen = {};
 var result = testJSON.map(function(value){
 return Object.keys(value).map(function(key){
 return value[key];
 })
 }).reduce(function(a, b) {
 return a.concat(b);
 }, []).filter(function(value){
 if (!seen[value]){
 seen[value] = 1;
 return true;
 }
 seen[value] += 1;
 return false;
 })
// seen contains the number of times each value was 'seen'
 console.log('seen: ' + JSON.stringify(seen));
 console.log('result: ' + result);

Answer 3

It sounds like you're trying to count how many times each asset was used... The simplest way is to keep a map of objects you have seen before. Array.prototype.reduce is a nice way to do that

var testJSON = [{"AssetA":"asset_a","AssetB":"asset_b"},{"AssetA":"asset_a","AssetB":"asset_b"},{"AssetA":"asset_c","AssetB":"asset_d"},{"AssetA":"asset_c","AssetB":"asset_e"}];
var usage = testJSON.reduce((prev, next) => {
 prev[next.AssetA] = next.AssetA in prev ? prev[next.AssetA] + 1 : 1;
 prev[next.AssetB] = next.AssetB in prev ? prev[next.AssetB] + 1 : 1;
 return prev;
}, {});
console.log('How much were they used?', usage);
// If you want to know which ones were used two or more times, you can use
console.log('Used more than once', Object.keys(usage).filter(key => usage[key] > 1))
 

A version of the above without reduce would be

var usage = {};
testJSON.forEach(el => {
 usage[el.AssetA] = el.AssetA in usage ? usage[el.AssetA] + 1 : 1;
 usage[el.AssetB] = el.AssetB in usage ? usage[el.AssetB] + 1 : 1;
});
console.log('How much were they used?', usage);
// If you want to know which ones were used two or more times, you can use
console.log('Used more than once', Object.keys(usage).filter(key => usage[key] > 1))

• CircAnalyzer: This code appears to do what I want. However, I am very new to JS, and am having a hard time understanding reduce.
• Ruan Mendes: @DeeTee Did you read the link I provided? The simplest way to understand it is [1,2,3,4].reduce( (prev, next) => prev + next, 0). That will add all the items in the array, giving it a 0 as the starting value for the calculations. In my example, the starting value is an object that will be used as the map, and we iterate over the array, stuffing the object for each element in the array
• CircAnalyzer: I read it, still had a hard time understanding. Anyhow, this method tells me how many times each element in the object appears, but it doesn't tell me how many connections belong to which assets. For example, asset_a has two connections to asset_b. In that case, what I would do is draw one box for asset_a, and one box for asset_b, and have two connections between them.
• qballer: The arrow function is a new ES6 feature, in order to use you need to compile it. You can either use my answer or copy it babel playground here. babeljs.io/repl
• Ruan Mendes: @DeeTee That's new syntax for functions, called fat arrow functions. Just replace it with the old syntax if you can't use EcmaScript 6 yet.