We Keep Coding

Finding nested object data using basic JavaScript

I want to loop through 600+ array items in an object and find one particular item based on certain criteria. The array in the object is called "operations" and its items are arrays themselves.
My goal is to get the index of operation's array item which has the deeply nested string "Go".
In the sample below this would be the first element. My problem is that I can check if an array element contains "call" and "draw" but I don't know how to test for the nested dictionary "foobar". I only have basic JavaScript available, no special libraries.
let json = {
"head": {},
"operations": [
[
"call",
"w40",
"draw",
{
"parent": "w39",
"style": [
"PUSH"
],
"index": 0,
"text": "Modify"
}
],
[
"call",
"w83.gc",
"draw",
{
"foobar": [
["beginPath"],
[
"rect",
0,
0,
245,
80
],
["fill"],
[
"fillText",
"Go",
123,
24
],
[
"drawImage",
"rwt-resources/c8af.png",
]
]
}
],
[
"create",
"w39",
"rwt.widgets.Menu",
{
"parent": "w35",
"style": [
"POP_UP"
]
}
],
[
"call",
"w39",
"draw",
{
"parent": "w35",
"style": [
"POP_UP"
]
}
]
]
};
let index = "";
let operationList = json.operations;
for (i = 0; i < operationList.length; i++) {
if (operationList[i].includes('call') && operationList[i].includes('draw')) //missing another check if the dictionary "foobar" exists in this element )
{
index = i;
}
}
document.write(index)

I'll preface by saying that this data structure is going to be tough to manage in general. I would suggest a scheme for where an operation is an object with well defined properties, rather than just an "array of stuff".
That said, you can use recursion to search the array.
If any value in the array is another array, continue with the next level of recursion
If any value is an object, search its values
const isPlainObject = require('is-plain-object');
const containsTerm = (value, term) => {
// if value is an object, search its values
if (isPlainObject(value)) {
value = Object.values(value);
}
// if value is an array, search within it
if (Array.isArray(value)) {
return value.find((element) => {
return containsTerm(element, term);
});
}
// otherwise, value is a primitive, so check if it matches
return value === term;
};
const index = object.operations.findIndex((operation) => {
return containsTerm(operation, 'Go');
});

Filter out objects in array if one value is the same

I am fetching data from an api that, sometimes, gives me multiple objects with the same values, or very similar values, which I want to remove.
For example, I might get back:
[
{
"Name": "blah",
"Date": "1992-02-18T00:00:00.000Z",
"Language": "English",
},
{
"Name": "blahzay",
"Date": "1998-02-18T00:00:00.000Z",
"Language": "French",
}, {
"Name": "blah", // same name, no problem
"Date": "1999-02-18T00:00:00.000Z", // different date
"Language": "English", // but same language
},
]
So I want to check that no two objects have a key with the same "Language" value (in this case, "English").
I would like to get the general process of filtering out the entire object if it's "Language" value is duplicated, with the extra issue of not having the same number of objects returned each time. So, allowing for dynamic number of objects in the array.
There is an example here:
Unexpeected result when filtering one object array against two other object arrays
but it's assuming that you have a set number of objects in the array and you are only comparing the contents of those same objects each time.
I would be looking for a way to compare
arrayName[eachObject].Language === "English"
and keep one of the objects but any others (an unknown number of objects) should be filtered out, most probably using .filter() method along with .map().

The below snippets stores the languages that have been encountered in an array. If the current objects language is in the array then it is filtered out. It makes the assumption that the first object encountered with the language is stored.
const objs = [
{
"Name": "blah",
"Date": "1992-02-18T00:00:00.000Z",
"Language": "English",
},
{
"Name": "blahzay",
"Date": "1998-02-18T00:00:00.000Z",
"Language": "French",
}, {
"Name": "blah", // same name, no problem
"Date": "1999-02-18T00:00:00.000Z", // different date
"Language": "English", // but same language
},
],
presentLanguages = [];
let languageIsNotPresent;
const objsFilteredByLanguage = objs.filter(function (o) {
languageIsNotPresent = presentLanguages.indexOf(o.Language) == -1;
presentLanguages.push(o.Language);
return languageIsNotPresent;
});
console.log(objsFilteredByLanguage);

You could take a hash table and filter the array by checking Name and Language.
var array = [{ Name: "blah", Date: "1992-02-18T00:00:00.000Z", Language: "English" }, { Name: "blahzay", Date: "1998-02-18T00:00:00.000Z", Language: "French" }, { Name: "blah", Date: "1999-02-18T00:00:00.000Z", Language: "English" }],
hash = {},
result = array.filter(({ Name, Language }) => {
var key = `${Name}|${Language}`;
if (!hash[key]) return hash[key] = true;
});
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Using Set makes it easy to remove duplicates for as many keys as you like. I tried to be as verbose as possible so that each step was clear.
var objects = [{ "Name": "blah", "Date": "1992-02-18T00:00:00.000Z", "Language": "English", }, { "Name": "blah", "Date": "1998-02-18T00:00:00.000Z", "Language": "French", }, { "Name": "blah", "Date": "1999-02-18T00:00:00.000Z", "Language": "English" }];
function uniqueKeyVals(objects, key) {
const objVals = objects.map(object => object[key]); // ex. ["English", "French", "English"]
return objects.slice(0, new Set(objVals).size); // ex. { "English", "French" }.size = 2
}
function removeKeyDuplicates(objects, keys) {
keys.forEach(key => objects = uniqueKeyVals(objects, key));
return objects;
}
// can also use uniqueKeyVals(key) directly for just one key
console.log("Unique 'Language': \n", removeKeyDuplicates(objects, ["Language"]));
console.log("Unique ['Language', 'Name']: \n", removeKeyDuplicates(objects, ["Language", "Name"]));

I would use the underscore module for JavaScript and the unique function in this scenario. Here is a sample array of data objects:
let data = [{
name: 'blah',
date: Date.now(),
language: "en"
},
{
name: 'noblah',
date: Date.now(),
language: 'es'
},
{
name: 'blah',
date: Date.now(),
language: 'en'
}];
Then we can use the unique function in the underscore library to only return a copy of the data that has unique values associated with the language key:
const result = _.unique(data, 'language');

Flatten JSON data

I am trying to use Tabulator to create a list of tickets, The data is imported via AJAX url from the ticket system as a JSON as below.
{
"results": [
{
"cc_emails": [
"ram#freshdesk.com",
"diana#freshdesk.com"
],
"fwd_emails": [],
"reply_cc_emails": [
"ram#freshdesk.com",
"diana#freshdesk.com"
],
"ticket_cc_emails": [
"ram#freshdesk.com",
"diana#freshdesk.com"
],
"fr_escalated": false,
"spam": false,
"email_config_id": null,
"group_id": 35000204315,
"priority": 1,
"requester_id": 35020281588,
"responder_id": 35004154466,
"source": 2,
"company_id": null,
"status": 2,
"subject": "Support Needed...",
"association_type": null,
"to_emails": null,
"product_id": null,
"id": 188261,
"type": null,
"due_by": "2019-09-17T15:12:07Z",
"fr_due_by": "2019-07-01T15:12:07Z",
"is_escalated": false,
"description": "<div>Details about the issue...</div>",
"description_text": "Details about the issue...",
"custom_fields": {
"cf_category": null,
"cf_firstname": null,
"cf_surname": null,
"cf_user_trainging": null,
"cf_email_address": null,
"cf_office_365": null,
"cf_start_date": null,
"cf_permission_level": null,
"cf_hardware_type": null,
"cf_additional_information_specsoftware_etc": null,
"cf_vpn_access_required": false,
"cf_securitydistribution_group_membership": null,
"cf_mapped_network_driveslogin_script": null,
"cf_printers": null,
"cf_phone_extension": null,
"cf_ddi": null,
"cf_phone_group_membership": null,
"cf_user_who_requires_the_equipment": null,
"cf_requirment_date": null,
"cf_correctclosureused": null,
"cf_location": "A1"
},
"created_at": "2019-06-24T15:11:47Z",
"updated_at": "2019-06-24T15:59:00Z",
"associated_tickets_count": null,
"tags": []
}
],
"total": 1
}
The problem is the "custom_fields" is a JSON Object inside the main JSON object, is there a way to flatten this data out and display this as all one row in Tabulator? Any help appreciated?
My current result in Tabulator is it returns [object Object] for the custom_fields column. I would like to be able to see each of custom_fields in the row.

Handling Nested Data
There is no need to flatten the object, Tabulator can handle nested data for columns, if you use dot notation in the field name:
var table = new Tabulator("#example-table", {
columns:[
{title:"Category", field:"custom_fields.cf_category"}, //link column to nested field
],
});
Full details about nested data handling can be found in the Columns Documentation
Column Grouping
If you wanted to you could also use column grouping to show that the fields are a subset of a another property, for example we could define the top level columns as usual and then add column group to hold the custom columns
var table = new Tabulator("#example-table", {
columns:[
{title:"Subject", field:"subject"}, //standard column
{title:"Priorty", field:"priority"}, //standard column
{title:"Custom", columns:[ //column group to hold columns in custom_fields property
{title:"Category", field:"custom_fields.cf_category"},
{title:"First Name", field:"custom_fields.cf_firstname"},
]},
],
});
Full details can be found in the Column Grouping Documentation

If you're using es6+, you could easily achieve this by using rest in object destructuring and object spread.
const input = {
"results": [
{
"custom_fields": {...},
...
}
],
"total": 1
}
const expanded = input.results.map(result => {
const { custom_fields, ...rest } = result;
return { ...rest, ...custom_fields };
})

Here is a slightly different solution relying on function generators to traverse the original object, giving the possibility to eventually detect some duplicated keys.
This example can, of course, be altered by adding further checks (like whether you want to traverse all objects inside the main object and so on).
The current example takes care of:
Traversing the original object by excluding primitives and arrays.
Providing a flattenObject method that accepts an object as an argument and a callback as an eventual second argument that will be raised when a duplicated key is met. In that case, the default behavior is to take the "next" nested value as the new one. If false is returned in the callback, the current value is kept. The callback will provide the key and the value of the new value.
So, in a nutshell, the "real" code to acquire the desired result is this one:
// Case usage:
// Map the existing values.
input.results = input.results.map(i => flattenObject(i, (duplicatedKeyValuePair) => {
return false; // <-- keep the existing value if a duplicate is matched.
}));
console.log(input.results)
Of course, it's slightly more complicated then just flattening the desired property, but I wanted to give a more elastic flavour to it.
const input = {
"results": [
{
"cc_emails": [
"ram#freshdesk.com",
"diana#freshdesk.com"
],
"fwd_emails": [],
"reply_cc_emails": [
"ram#freshdesk.com",
"diana#freshdesk.com"
],
"ticket_cc_emails": [
"ram#freshdesk.com",
"diana#freshdesk.com"
],
"fr_escalated": false,
"spam": false,
"email_config_id": null,
"group_id": 35000204315,
"priority": 1,
"requester_id": 35020281588,
"responder_id": 35004154466,
"source": 2,
"company_id": null,
"status": 2,
"subject": "Support Needed...",
"association_type": null,
"to_emails": null,
"product_id": null,
"id": 188261,
"type": null,
"due_by": "2019-09-17T15:12:07Z",
"fr_due_by": "2019-07-01T15:12:07Z",
"is_escalated": false,
"description": "<div>Details about the issue...</div>",
"description_text": "Details about the issue...",
"test_duplicated_key": "hello! I should keep this!",
"custom_fields": {
"cf_category": null,
"cf_firstname": null,
"cf_surname": null,
"cf_user_trainging": null,
"cf_email_address": null,
"cf_office_365": null,
"cf_start_date": null,
"cf_permission_level": null,
"cf_hardware_type": null,
"cf_additional_information_specsoftware_etc": null,
"cf_vpn_access_required": false,
"cf_securitydistribution_group_membership": null,
"cf_mapped_network_driveslogin_script": null,
"cf_printers": null,
"cf_phone_extension": null,
"cf_ddi": null,
"cf_phone_group_membership": null,
"cf_user_who_requires_the_equipment": null,
"cf_requirment_date": null,
"cf_correctclosureused": null,
"cf_location": "A1",
"test_duplicated_key": "You should not see that."
},
"created_at": "2019-06-24T15:11:47Z",
"updated_at": "2019-06-24T15:59:00Z",
"associated_tickets_count": null,
"tags": []
}
],
"total": 1
}
/**
Traverse every property of the desired object, by returning the currently key-value pair looped. If the value is an object, it keeps traversing.
*/
function* traverseObject(obj) {
for ([key, value] of Object.entries(obj)) {
if (value && typeof(value) === 'object' && !Array.isArray(value)) {
yield* traverseObject(obj[key]);
}
else yield {key: key, value: value};
}
}
/**
Flattens the object by traversing every object inside it.
*/
function flattenObject(obj, onDuplicatedKey) {
let res = {};
for (keyValuePair of traverseObject(obj)) {
let add = true;
if (res.hasOwnProperty(keyValuePair.key)) {
add = onDuplicatedKey ? onDuplicatedKey.call(onDuplicatedKey, keyValuePair) : true; // default behavior: override with nested propeties.
}
if (add) res[keyValuePair.key] = keyValuePair.value;
}
return res;
}
/*
Sample usage.
const flattened = flattenObject(input.results[0], (record) => {
console.log('detected key value pair duplicate. Key:', record.key, ' value: ', record.value);
// true will override the value, false will not override the value.
return false;
});
*/
//console.log(flattened);
// Case usage:
// Map the existing values.
input.results = input.results.map(i => flattenObject(i, (duplicatedKeyValuePair) => {
return false; // <-- keep the existing value if a duplicate is matched.
}));
console.log(input.results);
Please note that the above case is just an example, I didn't spend much time testing every single property type, hence it can (of course) be reviewed and code quality and performances can be improved. It was just an example to show a different approach relying on different operators and logics.
As a (final) side note, I Think you can handle that with tabulator in some way, though I'm not sure you can render multiple columns out of a single property, which leads me to believe that altering the original object is probably the desired solution.

Get array parent key or combine with nested items

I have the following object with arrays:
{
"brands": [
"accessible-icon",
"accusoft",
"adn",
"adobe",
"adversal",
],
"regular": [
"address-book",
"address-card",
"angry",
"bell",
],
"solid": [
"ad",
"address-book",
"address-card",
"adjust",
"air-freshener",
"align-center",
]
}
I have a function which returns one item from one of the array groups. I have to find out which array group the item was pulled from. From what I understood, it's not possible to look up parent keys in js?
Getting the parent key would be ideal, otherwise, is it possible to add the parent key to all the nested items? For example the nested items in the brands array would become:
"brands": [
"brands-accessible-icon",
"brands-accusoft",
"brands-adn",
"brands-adobe",
"brands-adversal",
],
Then I can use regex to extract brands.
More info:
Initially I'm transforming objects into object with array groups. Here is an example of one of the objects named brands:
{
"faAccessibleIcon": {
"prefix": "fab",
"iconName": "accessible-icon",
"icon": [
448,
512,
[],
"f368",
]
},
"faAccusoft": {
"prefix": "fab",
"iconName": "accusoft",
"icon": [
640,
512,
[],
"f369",
]
},
"faAcquisitionsIncorporated": {
"prefix": "fab",
"iconName": "acquisitions-incorporated",
"icon": [
344,
512,
[],
"f6af",
]
},
}
Then I simplify the objects:
const array = {
"brands": Object.keys(brands).map(e=> brands[e].iconName),
"regular": Object.keys(regular).map(e=> regular[e].iconName),
"solid": Object.keys(solid).map(e=> solid[e].iconName),
};
And array becomes the object with arrays seen at the top of my question. The array structure must remain like that. Is there a way to combine prefix and iconName and get brands-accessible-icon, brands-accusoft, etc, in the nested array items, for each group of arrays?

You could get the keys of the object and find the value in the array.
const getKey = (object, value) => Object.keys(object).find(k => object[k].includes(value));
var data = { brands: ["accessible-icon", "accusoft", "adn", "adobe", "adversal"], regular: ["address-book", "address-card", "angry", "bell"], solid: ["ad", "address-book", "address-card", "adjust", "air-freshener", "align-center"] };
console.log(getKey(data, "bell"));

I think there is an easy answer to it.
const array = {
"brands": Object.keys(brands).map(e=> "brands-"+brands[e].iconName),
"regular": Object.keys(regular).map(e=> "regular-"+regular[e].iconName),
"solid": Object.keys(solid).map(e=> "solid-"+solid[e].iconName),
};

Here you go.
By getting the entries of your objects and then mapping every object to add their parent's name into their string, you can create your desired output.
(Unless I misunderstood your question since every answer seems to do something different)
Working example :
const data = {
"brands": [
"accessible-icon",
"accusoft",
"adn",
"adobe",
"adversal",
],
"regular": [
"address-book",
"address-card",
"angry",
"bell",
],
"solid": [
"ad",
"address-book",
"address-card",
"adjust",
"air-freshener",
"align-center",
]
}
const result = Object.entries(data).reduce((acc, [key, value]) => ({ ...acc, [key]: value.map(obj => key + '-' + obj) }), {})
console.log(result)

Insert array of objects to database

I have the following array containing objects, And there are arrays in the objects too.
let array = [
{
"data": {
"Game": {
"Game_number": [
"4",
"6",
"8"
],
"Game_name": [
"Name_1",
"Name_2",
"name_3"
]
},
"AA": {
"AA_count": [
"30"
],
"AA_name": [
"Umbrella"
]
},
}
}
]
Now i have to put them in database, Each have a column against.
But the issue is that the above data is not constant, So i cannot put them via their indexes. if the data is missing for a column than that's fine it will go empty
I tried via for each but that is inserting the last element of the array.
array.data.forEach((item) => {
const Games = Parse.Object.extend('Games');
const query = new Games();
item.data.Game.Game_number.forEach((number) => {
query.set('game_number', number);
}, this);
item.data.Game.Game_name.forEach((name) => {
query.set('game_name', name);
}, this);
query.save();
}, this);
What will be a flexible way to handle it ?