Develop Reference

How to Recursively Append Child Objects to Parent Objects By Key

I have a flat object structure which outlines which objects have parents and which don't. I'm now at the point that I need it to be formatted in the correct structure so I can loop through it and perform functions.
Just to add before I go into detail.. I know the Object structure is not consistent, I'm still working on making sure all individual items are consistent. The most important part is that children are aligned with parents.
I've searched online, but couldn't seem to find anything that fit my exact need. The structure, whether good or bad, is what I'm stuck with now.
I was fiddling with this code which does loop and append children to the appropriate parent, and removes the old key. I forgot about recursion and can't wrap my head around doing this... in this specific case.
var tree = hierarchy.tree, key;
for (key in tree) {
if (tree.hasOwnProperty(key)) tree[key].children = {};
}
iterate();
return tree;
function iterate() {
var field, node;
for (field in tree) {
if (tree.hasOwnProperty(field)) {
node = tree[field];
if (node.parent !== undefined) {
tree[node.parent].children[field] = node;
delete tree[field];
}
}
}
}
This is the base structure:
var tree = {
"submit": {
"order": 0,
"field": "submit"
},
"hc3qu2nf4": {
"label": "title",
"parent": "",
"order": 0,
"field": "title",
"options": {
"Font Size": "25px",
"Font Weight": "Bold",
"Font Style": "Italic",
"Color": "rgb(64, 128, 128)"
}
},
"dhthivju9": {
"label": "divider",
"parent": "",
"order": 1,
"field": "divider",
"options": {
"height": "14px",
"color": "#21ce09",
"width": "50%"
}
},
"z5o9m7sgx": {
"label": "",
"parent": "4hhsi94n7",
"order": 0,
"field": "col"
},
"85ugwci2c": {
"label": "",
"parent": "4hhsi94n7",
"order": 1,
"field": "col"
},
"4hhsi94n7": {
"label": "column",
"parent": "",
"order": 2,
"field": "column"
},
"sbf0bg1o7": {
"label": "month",
"parent": "z5o9m7sgx",
"order": 0,
"field": "month",
"options": {
"start": "2019-04"
},
"required": true
},
"c3bwnyjmg": {
"label": "",
"parent": "4hhsi94n7",
"order": 2
},
"n5m9d84dg": {
"label": "number",
"parent": "85ugwci2c",
"order": 0,
"field": "number",
"options": {
"start": "5",
"min": "5",
"max": "10",
"step": "2"
}
},
"krfxfnzsr": {
"label": "date",
"parent": "c3bwnyjmg",
"order": 0,
"field": "date",
"options": {
"start": "2019-05-03"
}
}
}
Ideally I would like the structure to be like this below. There could be multiple more layers than this.
{
"submit": {
"order": 0,
"field": "submit"
},
"hc3qu2nf4": {
"label": "title",
"parent": "",
"order": 0,
"field": "title",
"options": {
"Font Size": "25px",
"Font Weight": "Bold",
"Font Style": "Italic",
"Color": "rgb(64, 128, 128)"
}
},
"dhthivju9": {
"label": "divider",
"parent": "",
"order": 1,
"field": "divider",
"options": {
"height": "14px",
"color": "#21ce09",
"width": "50%"
}
},
"4hhsi94n7": {
"label": "column",
"parent": "",
"order": 2,
"field": "column",
"children": {
"z5o9m7sgx": {
"label": "",
"order": 0,
"field": "col",
"children": {
"sbf0bg1o7": {
"label": "month",
"parent": "z5o9m7sgx",
"order": 0,
"field": "month",
"options": {
"start": "2019-04"
},
"required": true
}
}
},
"85ugwci2c": {
"label": "",
"order": 1,
"field": "col",
"children": {
"n5m9d84dg": {
"label": "number",
"parent": "85ugwci2c",
"order": 0,
"field": "number",
"options": {
"start": "5",
"min": "5",
"max": "10",
"step": "2"
}
}
}
},
"c3bwnyjmg": {
"label": "",
"order": 2,
"children": {
"krfxfnzsr": {
"label": "date",
"parent": "c3bwnyjmg",
"order": 0,
"field": "date",
"options": {
"start": "2019-05-03"
}
}
}
}
}
}
}
In addition, it could be great if I could maintain the appropriate "order" of each item, so they are sorted appropriately.
UPDATE
I'm not married to the output structure. If someone has a better idea please let me know.

I found this solution but it uses arrays instead of objects (for find, reduce, splice, push, etc...) so the final output is not exactly what you wanted, but you wrote it was not set in stone.
const data = {
"submit": {
"order": 0,
"field": "submit"
},
"hc3qu2nf4": {
"label": "title",
"parent": "",
"order": 0,
"field": "title",
"options": {
"Font Size": "25px",
"Font Weight": "Bold",
"Font Style": "Italic",
"Color": "rgb(64, 128, 128)"
}
},
"dhthivju9": {
"label": "divider",
"parent": "",
"order": 1,
"field": "divider",
"options": {
"height": "14px",
"color": "#21ce09",
"width": "50%"
}
},
"z5o9m7sgx": {
"label": "",
"parent": "4hhsi94n7",
"order": 0,
"field": "col"
},
"85ugwci2c": {
"label": "",
"parent": "4hhsi94n7",
"order": 1,
"field": "col"
},
"4hhsi94n7": {
"label": "column",
"parent": "",
"order": 2,
"field": "column"
},
"sbf0bg1o7": {
"label": "month",
"parent": "z5o9m7sgx",
"order": 0,
"field": "month",
"options": {
"start": "2019-04"
},
"required": true
},
"c3bwnyjmg": {
"label": "",
"parent": "4hhsi94n7",
"order": 2
},
"n5m9d84dg": {
"label": "number",
"parent": "85ugwci2c",
"order": 0,
"field": "number",
"options": {
"start": "5",
"min": "5",
"max": "10",
"step": "2"
}
},
"krfxfnzsr": {
"label": "date",
"parent": "c3bwnyjmg",
"order": 0,
"field": "date",
"options": {
"start": "2019-05-03"
}
}
};
function sortArray(orderedArray, remainingArray) {
if(remainingArray.length === 0) {
return orderedArray;
}
else {
remainingArray.forEach((remainingItem, index) => {
if(orderedArray.find(x => x.identifier === remainingItem.parent)) {
orderedArray.push(remainingItem);
remainingArray.splice(index, 1);
}
});
return sortArray(orderedArray, remainingArray);
}
}
function insertNode(tree, node) {
if(!tree) return;
let item = tree.find(x => x.identifier === node.parent);
if(item) {
(item.children || (item.children = [])).push(node);
} else {
tree.forEach(x => {
insertNode(x.children, node);
});
}
return tree;
}
function createTree(data) {
let tempArray = [];
for (let key in data) {
tempArray.push({ ...data[key], identifier: key });
}
tempArray = sortArray(tempArray.filter(x => !x.parent), tempArray.filter(x => x.parent));
return tempArray.reduce((accumulator, currentValue) => {
if(currentValue.parent === "") {
accumulator.push(currentValue);
} else {
insertNode(accumulator, currentValue);
}
return accumulator;
}, []);
}
console.log(createTree(data));

The example below preserves Object type instead of switching to Array. See inline comments for more details. Basic concept is to treat the tree itself as a master branch and iterate through branches until finding the parent to reposition the child to.
//iterating through an object/array that's changing can cause unexpected results
//iterate through a duplicate that will not change
let tree = {
"submit": {
"order": 0,
"field": "submit"
},
"hc3qu2nf4": {
"label": "title",
"parent": "",
"order": 0,
"field": "title",
"options": {
"Font Size": "25px",
"Font Weight": "Bold",
"Font Style": "Italic",
"Color": "rgb(64, 128, 128)"
}
},
"dhthivju9": {
"label": "divider",
"parent": "",
"order": 1,
"field": "divider",
"options": {
"height": "14px",
"color": "#21ce09",
"width": "50%"
}
},
"z5o9m7sgx": {
"label": "",
"parent": "4hhsi94n7",
"order": 0,
"field": "col"
},
"85ugwci2c": {
"label": "",
"parent": "4hhsi94n7",
"order": 1,
"field": "col"
},
"4hhsi94n7": {
"label": "column",
"parent": "",
"order": 2,
"field": "column"
},
"sbf0bg1o7": {
"label": "month",
"parent": "z5o9m7sgx",
"order": 0,
"field": "month",
"options": {
"start": "2019-04"
},
"required": true
},
"c3bwnyjmg": {
"label": "",
"parent": "4hhsi94n7",
"order": 2
},
"n5m9d84dg": {
"label": "number",
"parent": "85ugwci2c",
"order": 0,
"field": "number",
"options": {
"start": "5",
"min": "5",
"max": "10",
"step": "2"
}
},
"krfxfnzsr": {
"label": "date",
"parent": "c3bwnyjmg",
"order": 0,
"field": "date",
"options": {
"start": "2019-05-03"
}
}
},
tree2 = JSON.parse(JSON.stringify(tree)); //clone, not reference
console.log(tree === tree2); //test to confirm duplicate is not a reference
function reposition_child(parent, child, node, branch) {
//check if the parent exists in this branch
if (branch.hasOwnProperty(parent)) {
let bp = branch[parent];
//create children object as needed
if (!bp.hasOwnProperty('children')) {
bp.children = {};
}
//transplant the node as a child
bp.children[child] = node;
return true;
} else {
//iterate through the branches with children looking for the parent
let found = false;
for (let sub_branch in branch) {
if (branch[sub_branch].hasOwnProperty('children')) {
found = reposition_child(parent, child, node, branch[sub_branch].children);
}
//exit the loop once the parent is found
if (found) {
return true;
}
}
}
return false;
}
//iterate through the tree (duplicate fixed version)
for (let node in tree2) {
let tn = tree2[node];
//reposition nodes that have a non-empty parent
if (tn.hasOwnProperty('parent') && tn.parent.length) {
reposition_child(tn.parent, node, tn, tree);
delete tree[node];
}
}
//cleanup and output
delete tree2;
console.log(tree);

Why data is doubled, how I can fix it?

Good afternoon.
I have required json, which contains the basic template for the layout of Adaptive Cards (bot framework).
Here's this json:
{
"$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
"version": "1.0",
"type": "AdaptiveCard",
"speak": "",
"body": [
{
"type": "TextBlock",
"horizontalAlignment": "center",
"text": "Все машины",
"weight": "bolder",
"isSubtle": false
},
{
"type": "TextBlock",
"text": "Внимание, вы вошли в режим тендера.",
"separator": true
}
],
"actions": [
{
"type": "Action.Submit",
"title": "Подтвердить лот(ы)",
"data": {
"msteams": {
"type": "messageBack",
"displayText": "Идет подтверждение ваших лотов, ожидайте!",
"text": "/accept",
"value": "{\"x\": \"bfVal\", \"y\": \"from value\"}"
}
}
},
{
"type": "Action.Submit",
"title": "Отменить все лоты",
"data": {
"x": "123",
"msteams": {
"type": "messageBack",
"displayText": "Идет отменение ваших лотов, ожидайте!",
"text": "/cancel",
"value": "{\"bfKey\": \"bfVal\", \"conflictKey\": \"from value\"}"
}
}
}
]
}
I also have a loop that takes data from my source and forms another json from it.
try {
// Pull in the data from Microsoft Graph.
const client = new SimpleGraphClient(tokenResponse.token);
const me = await client.getList();
var i = 0;
while (i < me['value'].length) {
feed = {
"type": "ColumnSet",
"separator": true,
"columns": [
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"text": "Продукт",
"isSubtle": true
},
{
"type": "TextBlock",
"size": "extraLarge",
"color": "accent",
"text": me.value[i].fields.Good,
"spacing": "none"
},
{
"type": "TextBlock",
"text": "Дата: " + dateFormat(me.value[i].fields.ShipmentDateTime, 'dd-mm-yyyy'),
"spacing": "yes"
}
]
},
{
"type": "Column",
"width": "auto",
"items": [
{
"type": "TextBlock",
"text": " "
},
{
"type": "Image",
"url": "https://png.pngtree.com/svg/20170614/engine_oil_410031.png",
"size": "medium",
"spacing": "yes"
},
{
"type": "TextBlock",
"text": " ID: " + me.value[i].fields.id,
"value": me.value[i].fields.id
}
]
},
{
"type": "Column",
"width": 1,
"items": [
{
"type": "TextBlock",
"horizontalAlignment": "right",
"text": "RUB",
"isSubtle": true
},
{
"type": "TextBlock",
"horizontalAlignment": "right",
"size": "extraLarge",
"color": "accent",
"text": me.value[i].fields.PricePerTon,
"spacing": "none"
},
{
"type": "Input.Toggle",
"title": "Приобрести лот",
"valueOn": "true",
"valueOff": "false",
"id": "buyGood",
"spacing": "yes"
}
]
}
]
}
tender.body.push(feed);
i++;
}
Then I combine these json.
This works well, but when you retrieve the data again, the data is doubled.
How can this be resolved?
Thanks in advance.

It looks like every time you create a new card, you are appending the JSON object you created in the while loop to your required JSON object. Consequently, the next time you try to create a new card, the data from the previous request is still stored in your required JSON object. To avoid this, create a copy of the required JSON Object and store it in a different variable before your while loop. You can use JSON.parse(JSON.stringify(obj)) to create a copy of a JSON Object.
Your code should look something like this:
// create a copy of the required JSON Object
// and store it in a new variable
const card = JSON.parse(JSON.stringify(tender));
var i = 0;
while (i < me['value'].length) {
let feed = {
"type": "ColumnSet",
"separator": true,
...
}
// push feed to `card` instead of `tender`
card.body.push(feed);
i++;
}
...
// send `card` to user instead of `tender`
await turnContext.sendActivity({
text: "Double Data Card",
attachments: [CardFactory.adaptiveCard(card)]
});

LabelDisplay for fusion charts MScombi3d charts

I need some help in displaying the xaxis labels for a MSCombi3d chart. I have checked and for 2d charts, there are below two attributes available. which when we set in the chart, the x axis labels will display in a rotated format.
labelDisplay='Rotate' & slantLabels='1'
But when I try to use the above for a MScombi3d chart it doesnot work. I have gone through the documentation and could only find this attribute xLabelGap='50'. But it does not rotate/display the x axis labels in a slant.
Can someone please suggest the attribute that needs to be used for MSCombi3d charts to display the x axis labels in a slant.
Any help on this is much appreciated.

The attribute xLabelGap is perhaps a deprecated or at least not applicable in FusionCharts Javascript version. Although I found some usage of this attribute here, but nowhere in the official FusionCharts docs
I found the attributes labelDisplay and slantLabels in MSCombi3d charts(JS version) functional since its 3.4.0 version. Might work before that too! :D
Below snippet illustrates the use of these attributes with its latest version. You can visit the download page.
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'stackedcolumn3dlinedy',
renderAt: 'chart-container',
width: '550',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Business Results 2005 v 2006",
"xaxisname": "Month",
"yaxisname": "Revenue",
"showvalues": "0",
"numberprefix": "$",
"labelDisplay": "rotate",
"slantLabels": "1",
"animation": "1"
},
"categories": [{
"category": [{
"label": "Jan"
}, {
"label": "Feb"
}, {
"label": "Mar"
}, {
"label": "Apr"
}, {
"label": "May"
}, {
"label": "Jun"
}, {
"label": "Jul"
}, {
"label": "Aug"
}, {
"label": "Sep"
}, {
"label": "Oct"
}, {
"label": "Nov"
}, {
"label": "Dec"
}]
}],
"dataset": [{
"seriesname": "2006",
"data": [{
"value": "27400"
}, {
"value": "29800"
}, {
"value": "25800"
}, {
"value": "26800"
}, {
"value": "29600"
}, {
"value": "32600"
}, {
"value": "31800"
}, {
"value": "36700"
}, {
"value": "29700"
}, {
"value": "31900"
}, {
"value": "34800"
}, {
"value": "24800"
}]
}, {
"seriesname": "2005",
"renderas": "Area",
"data": [{
"value": "10000"
}, {
"value": "11500"
}, {
"value": "12500"
}, {
"value": "15000"
}, {
"value": "11000"
}, {
"value": "9800"
}, {
"value": "11800"
}, {
"value": "19700"
}, {
"value": "21700"
}, {
"value": "21900"
}, {
"value": "22900"
}, {
"value": "20800"
}]
}, {
"seriesname": "2004",
"renderas": "Line",
"data": [{
"value": "7000"
}, {
"value": "10500"
}, {
"value": "9500"
}, {
"value": "10000"
}, {
"value": "9000"
}, {
"value": "8800"
}, {
"value": "9800"
}, {
"value": "15700"
}, {
"value": "16700"
}, {
"value": "14900"
}, {
"value": "12900"
}, {
"value": "8800"
}]
}],
"trendlines": [{
"line": [{
"startvalue": "22000",
"color": "91C728",
"displayvalue": "Target"
}]
}],
"styles": {
"definition": [{
"name": "bgAnim",
"type": "animation",
"param": "_xScale",
"start": "0",
"duration": "1"
}],
"application": [{
"toobject": "BACKGROUND",
"styles": "bgAnim"
}]
}
}
}).render();
});
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<!-- Stacked Column 3D + Line Dual Y axis chart showing quarterly cost analysis for the last year. -->
<div id="chart-container">FusionCharts will render here</div>
A fiddle link for the avobe implementation.
Get to know more about the supported attributes in MSCombination 3d charts from here.

How to recreate json object

I have json object like this
[
{
"name": "first_name",
"value": "sssssssssssssssssss"
},{
"name": "email",
"value": "ss.ss#gmail.com"
}, {
"name": "address",
"value": "ssssssssssssssssssss"
}, {
"name": "PhoneNumber",
"value": "12342123321"
}
]
This data is coming on form subbmission
But i want json data as
{
"formProperties": {
"table": "users",
"mode": "insert",
"method":"post",
"action":"urlhere",
"user":"admin"
},
"formValues": [
{
"name": "first_name",
"value": "sssssssssssssssssss"
},{
"name": "email",
"value": "ss.ss#gmail.com"
}, {
"name": "address",
"value": "ssssssssssssssssssss"
}, {
"name": "PhoneNumber",
"value": "12342123321"
}
]
}
How to reconstruct JSON object. please help me friends I was strucked with this problem.
Thanks in advance

Assume the JSON as string is saved in the variable called json you can use the following code:
var newObject = {
"formProperties": {
"table": "users",
"mode": "insert",
"method":"post",
"action":"urlhere",
"user":"admin"
},
"formValues": JSON.parse(json)
};
var newJson = JSON.stringify(newObject);

Getting a value from JSON, Node.js

I am having trouble with getting a value from inside of a JSON file, which has been retrieved from the Steam API (http://steamcommunity.com/dev).
The problem occurs when I attempt to print the data, the Node.js file code is below:
var data = JSON.parse(body); // Stores the JSON data which has been retrieved
console.log(data.result.toString(350462890).market_hash_name); // Attempts to grab the value of the market_hash_name from the JSON data and display it to screen
I get the following response: "undefined".
JSON data used below:
{
"result": {
"350462890": {
"icon_url": "fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz5-OOqhNQh0fTvSAK5KVPAoywXpDS4n5YliBtazruNQfgrssNfPN-IqYtkdSpTZU_OCYAir70luiaAPfZOIqHznw223bZvDH3kW",
"icon_url_large": "fWFc82js0fmoRAP-qOIPu5THSWqfSmTELLqcUywGkijVjZYMUrsm1j-9xgEObwgfEh_nvjlWhNzZCveCDfIBj98xqodQ2CZknz5-OOqhNQh0fTvSAK5KVPAoywXpDS4n5fhvVcWx8vUHe126vYrANLYvNI1FG5LWCPfXM1304048hqALKpffqSu9jyvoMjgCRVO1rexMsCC1",
"icon_drag_url": "",
"name": "Dual Berettas | Panther",
"market_hash_name": "Dual Berettas | Panther (Field-Tested)",
"market_name": "Dual Berettas | Panther (Field-Tested)",
"name_color": "D2D2D2",
"background_color": "",
"type": "Mil-Spec Grade Pistol",
"tradable": "1",
"marketable": "1",
"commodity": "0",
"fraudwarnings": "",
"descriptions": {
"0": {
"type": "html",
"value": "Exterior: Field-Tested",
"app_data": ""
},
"1": {
"type": "html",
"value": " ",
"app_data": ""
},
"2": {
"type": "html",
"value": "Firing two large-mag Berettas at once will lower accuracy and increase load times. On the bright side, you'll get to fire two large-mag Berettas at once. It has been painted in a black, grey and red color scheme.",
"app_data": ""
},
"3": {
"type": "html",
"value": " ",
"app_data": ""
},
"4": {
"type": "html",
"value": "The Arms Deal 3 Collection",
"color": "9da1a9",
"app_data": {
"def_index": "65535",
"is_itemset_name": "1"
}
},
"5": {
"type": "html",
"value": " ",
"app_data": ""
}
},
"owner_descriptions": "",
"actions": {
"0": {
"name": "Inspect in Game...",
"link": "steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20S%owner_steamid%A%assetid%D14429613083935122456"
}
},
"market_actions": {
"0": {
"name": "Inspect in Game...",
"link": "steam://rungame/730/76561202255233023/+csgo_econ_action_preview%20M%listingid%A%assetid%D14429613083935122456"
}
},
"tags": {
"0": {
"internal_name": "CSGO_Type_Pistol",
"name": "Pistol",
"category": "Type",
"category_name": "Type"
},
"1": {
"internal_name": "weapon_elite",
"name": "Dual Berettas",
"category": "Weapon",
"category_name": "Weapon"
},
"2": {
"internal_name": "set_weapons_iii",
"name": "The Arms Deal 3 Collection",
"category": "ItemSet",
"category_name": "Collection"
},
"3": {
"internal_name": "normal",
"name": "Normal",
"category": "Quality",
"category_name": "Category"
},
"4": {
"internal_name": "Rarity_Rare_Weapon",
"name": "Mil-Spec Grade",
"category": "Rarity",
"color": "4b69ff",
"category_name": "Quality"
},
"5": {
"internal_name": "WearCategory2",
"name": "Field-Tested",
"category": "Exterior",
"category_name": "Exterior"
}
},
"classid": "350462890"
},
"success": true
}
}
So does anyone have any idea how I can return the market_hash_name? also please take note, I am fairly new to using Node.js.

data.result['350462890'].market_hash_name