I am trying to format data that I send to an endpoint. Currently the endpoint expects a certain format but the data that I am sending does not match that entirely. The data I am sending has extra brackets. Please see my code below versus what it expected.
What I am sending
[
[
{
"corporateId": "97765c76-19c3-48b5-8183-d450e72e8f23",
"selectedMAP": [
{
"mapId": 53,
"mapName": "Discovery",
"active": true,
"options": [
{
"optionId": 81,
"optionName": "Keycare",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
}
]
},
{
"mapId": 54,
"mapName": "Bestmed",
"active": true,
"options": [
{
"optionId": 83,
"optionName": "Beat 1",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
},
{
"optionId": 84,
"optionName": "Beat 2",
"memberAmount": 2000,
"adultDependantAmount": 1000,
"childDependantAmount": 1000,
"active": true
}
]
}
]
}
],
{
"gapCoverProviders": [
{
"id": 0,
"name": "a",
"isActive": true,
"gapCoverOptions": [
{
"id": 0,
"name": "b",
"optionPrice": 111,
"isActive": true
}
]
}
]
}
]
What is expected
{
"corporateId": "string",
"active": true,
"selectedMAP": [
{
"mapId": 0,
"mapName": "string",
"active": true,
"options": [
{
"optionId": 0,
"optionName": "string",
"memberAmount": 0,
"adultDependantAmount": 0,
"childDependantAmount": 0,
"active": true
}
]
}
],
"gapCoverProviders": [
{
"id": 0,
"name": "string",
"isActive": true,
"gapCoverOptions": [
{
"id": 0,
"name": "string",
"isActive": true,
"optionPrice": 0
}
]
}
]
}
I build the structure that is being posted as follows. I have 2 models which I then combine into 1 data set.
model 1
export class CompanyMedicalAidProvider {
corporateId: string;
active: boolean = true;
selectedMAP: Array<SelectedMap>;
}
model 2
export class CompanyGapCoverProvider {
gapCoverProviders: Array<GapCoverProviders>;
}
data that gets posted
data = [this.companyMedicalAidProvider, this.companyGapCoverProvider];
Any ideas how i can go about changing the structure? I am stuck on this part.
You can create new Data in required format like this
var data = [
[
{
"corporateId": "97765c76-19c3-48b5-8183-d450e72e8f23",
"selectedMAP": [
{
"mapId": 53,
"mapName": "Discovery",
"active": true,
"options": [
{
"optionId": 81,
"optionName": "Keycare",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
}
]
},
{
"mapId": 54,
"mapName": "Bestmed",
"active": true,
"options": [
{
"optionId": 83,
"optionName": "Beat 1",
"memberAmount": 1000,
"adultDependantAmount": 500,
"childDependantAmount": 500,
"active": true
},
{
"optionId": 84,
"optionName": "Beat 2",
"memberAmount": 2000,
"adultDependantAmount": 1000,
"childDependantAmount": 1000,
"active": true
}
]
}
]
}
],
{
"gapCoverProviders": [
{
"id": 0,
"name": "a",
"isActive": true,
"gapCoverOptions": [
{
"id": 0,
"name": "b",
"optionPrice": 111,
"isActive": true
}
]
}
]
}
]
var newData = data[0][0]
newData['gapCoverProviders'] = data[1]['gapCoverProviders'];
console.log(newData)
Related
This is my response body. I want to select only Collaborator's "supportNotifications" key-value set to true, how can I do that?
{
"status": true,
"date": "2022-04-06T16:33:13.630Z",
"data": {
"collaborators": [
{
"name": "Paul",
"lastCheckin": "2022-03-31T19:54:50.584Z",
"sales": 1,
"createdAt": "2022-03-30T14:47:48.478Z",
"id": "62446d4ab7f4da001e8f40dc",
"supportNotification": true,
"collaboratorId": 1
},
{
"name": "John",
"lastCheckin": null,
"sales": 0,
"createdAt": "2022-03-01",
"id": "62446ea4b7f4da001e8f40df",
"supportNotification": false,
"collaboratorId": 6
}
],
"count": 2
}
}
let response = {
"status": true,
"date": "2022-04-06T16:33:13.630Z",
"data": {
"collaborators": [
{
"name": "Paul",
"lastCheckin": "2022-03-31T19:54:50.584Z",
"sales": 1,
"createdAt": "2022-03-30T14:47:48.478Z",
"id": "62446d4ab7f4da001e8f40dc",
"supportNotification": true,
"collaboratorId": 1
},
{
"name": "John",
"lastCheckin": null,
"sales": 0,
"createdAt": "2022-03-01",
"id": "62446ea4b7f4da001e8f40df",
"supportNotification": false,
"collaboratorId": 6
}
],
"count": 2
}
};
const collaborators = response.data.collaborators.filter(c => c.supportNotification);
This will give you each collaborator object that has supportNotification = true. Is this the result you are trying to select?
var body = {
status: true,
date: "2022-04-06T16:33:13.630Z",
data: {
collaborators: [
{
name: "Paul",
lastCheckin: "2022-03-31T19:54:50.584Z",
sales: 1,
createdAt: "2022-03-30T14:47:48.478Z",
id: "62446d4ab7f4da001e8f40dc",
supportNotification: true,
collaboratorId: 1,
},
{
name: "John",
lastCheckin: null,
sales: 0,
createdAt: "2022-03-01",
id: "62446ea4b7f4da001e8f40df",
supportNotification: false,
collaboratorId: 6,
},
],
count: 2,
},
};
var result = [];
body.data.collaborators.forEach((item) => {
if (item.supportNotification === true) {
result.push(item);
}
});
console.log(result);
I'm using highcharts and react-highcharts to display some graph in my application. Ideally I would like to color the area of the graph with some gradient, from the documentation and this example the option that I should add is this:
plotOptions: {
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
}
}
},
I'm trying to replicate the same with the configuration of my graph but it doesn't work, the graph looks exactly the same as if there was no fillColor option added. Here's the config of my graph:
{
"title": {
"text": ""
},
"chart": {
"height": 500,
"animation": false,
"events": {}
},
"legend": {
"enabled": true,
"align": "center",
"verticalAlign": "bottom",
"useHTML": true,
"y": 15
},
"navigator": {
"enabled": true,
"adaptToUpdatedData": false,
"handles": {
"enabled": false
},
"outlineWidth": 0,
"maskFill": "rgba(0, 0, 0, 0)",
"series": {
"type": "areaspline",
"color": "#4572A7",
"fillOpacity": 0.05,
"dataGrouping": {
"smoothed": true
},
"lineWidth": 1,
"marker": {
"enabled": false
},
"data": [
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
],
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
]
]
},
"max": null
},
"rangeSelector": {
"enabled": true,
"inputEnabled": true,
"buttons": [
{
"type": "mtd",
"count": 1,
"text": "MTD"
},
{
"type": "ytd",
"text": "YTD"
},
{
"type": "month",
"count": 1,
"text": "1m",
"preventDefault": true,
"performancePeriod": "one_month"
},
{
"type": "month",
"count": 3,
"text": "3m",
"preventDefault": true,
"performancePeriod": "three_months_actual"
},
{
"type": "month",
"count": 6,
"text": "6m",
"preventDefault": true,
"performancePeriod": "six_months_actual"
},
{
"type": "year",
"count": 1,
"text": "1y",
"preventDefault": true,
"performancePeriod": "one_year_actual"
},
{
"type": "year",
"count": 3,
"text": "3y",
"preventDefault": true,
"performancePeriod": "one_year_actual"
},
{
"type": "all",
"text": "All"
}
],
"selected": 5
},
"credits": {
"enabled": false
},
"yAxis": {
"labels": {
"style": {
"color": false,
"fontSize": false
}
},
"plotLines": [
{
"value": 0,
"width": 2,
"color": "silver"
}
]
},
"xAxis": {
"type": "datetime",
"startOnTick": false,
"labels": {
"style": {
"color": false,
"fontSize": false
}
},
"max": null,
"events": {}
},
"plotOptions": {
"area": {
"fillColor": {
"linearGradient": [
0,
0,
0,
300
],
"stops": [
[
0,
"#333"
],
[
1,
"#444"
]
]
}
},
"series": {
"marker": {
"lineColor": "white",
"fillColor": "#203A4C",
"symbol": "diamond",
"radius": 3,
"states": {
"hover": {
"fillColor": "white",
"radius": 5
}
}
},
"compare": "percent",
"compareBase": 0
}
},
"tooltip": {
"crosshairs": true,
"dateTimeLabelFormats": {
"millisecond": "%b %e, %Y",
"second": "%b %e, %Y",
"minute": "%b %e, %Y",
"hour": "%b %e, %Y",
"day": "%b %e, %Y",
"week": "%b %e, %Y",
"month": "%b %e, %Y",
"year": "%b %e, %Y"
},
"headerFormat": "<strong>{point.key}<strong><br/>",
"split": true,
"valueDecimals": 2
},
"series": [
{
"id": null,
"name": "test",
"data": [
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
],
[
1623200400000,
1.3675397235722446
],
[
1623286800000,
1.3482760115327748
],
[
1623373200000,
1.3546129384275694
],
[
1623632400000,
1.3414434698775963
],
[
1623718800000,
1.3312870572603575
]
],
"lineWidth": 2,
"tooltip": {
"valueDecimals": 4
}
}
]
}
If I remove the plotOptions.area property nothing changes in the graph, what am I missing?
Notice that with your current data the error occurs in the console:
https://assets.highcharts.com/errors/15/
The fillColor feature works only for particular series - like area, pie, funnel, pyramid, arearange etc, so you need to define the type of the series that you want to implemnent.
Simplified demo: https://jsfiddle.net/BlackLabel/5r8gxh2b/
I have an flowchart input using jquery flowchart library like so:
Flowchart
I get the data representation as this:
{
"operators": {
"0": {
"properties": {
"title": "Start",
"inputs": {},
"outputs": {
"outs": {
"label": "Output (:i)",
"multiple": true
}
},
"class": "start-operator"
},
"top": 0,
"left": 0
},
"1": {
"properties": {
"title": "End",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {},
"class": "end-operator"
},
"top": null,
"left": null
},
"37": {
"properties": {
"title": "CHROM",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {
"output": {
"label": "Output"
}
}
},
"left": 300,
"top": 0
},
"38": {
"properties": {
"title": "CHROM",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {
"output": {
"label": "Output"
}
}
},
"left": 580,
"top": 0
},
"39": {
"properties": {
"title": "REF",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {
"output": {
"label": "Output"
}
}
},
"left": 920,
"top": 0
},
"40": {
"properties": {
"title": "REF",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {
"output": {
"label": "Output"
}
}
},
"left": 300,
"top": 100
},
"41": {
"properties": {
"title": "REF",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {
"output": {
"label": "Output"
}
}
},
"left": 300,
"top": 200
},
"42": {
"properties": {
"title": "REF",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {
"output": {
"label": "Output"
}
}
},
"left": 620,
"top": 140
},
"43": {
"properties": {
"title": "POS",
"inputs": {
"ins": {
"label": "Input (:i)",
"multiple": true
}
},
"outputs": {
"output": {
"label": "Output"
}
}
},
"left": 740,
"top": 320
}
},
"links": {
"0": {
"fromOperator": "0",
"fromConnector": "outs",
"fromSubConnector": 0,
"toOperator": 37,
"toConnector": "ins",
"toSubConnector": 0,
"color": " #e53935"
},
"1": {
"fromOperator": "0",
"fromConnector": "outs",
"fromSubConnector": 1,
"toOperator": 40,
"toConnector": "ins",
"toSubConnector": 0,
"color": " #d81b60"
},
"2": {
"fromOperator": "0",
"fromConnector": "outs",
"fromSubConnector": 2,
"toOperator": 41,
"toConnector": "ins",
"toSubConnector": 0,
"color": " #8e24aa"
},
"3": {
"fromOperator": "0",
"fromConnector": "outs",
"fromSubConnector": 3,
"toOperator": 43,
"toConnector": "ins",
"toSubConnector": 0,
"color": " #5e35b1"
},
"4": {
"fromOperator": 37,
"fromConnector": "output",
"fromSubConnector": 0,
"toOperator": 38,
"toConnector": "ins",
"toSubConnector": 0,
"color": " #3949ab"
},
"5": {
"fromOperator": 40,
"fromConnector": "output",
"fromSubConnector": 0,
"toOperator": 42,
"toConnector": "ins",
"toSubConnector": 0,
"color": " #546e7a"
},
"6": {
"fromOperator": 41,
"fromConnector": "output",
"fromSubConnector": 0,
"toOperator": 42,
"toConnector": "ins",
"toSubConnector": 1,
"color": " #039be5"
},
"7": {
"fromOperator": 38,
"fromConnector": "output",
"fromSubConnector": 0,
"toOperator": 39,
"toConnector": "ins",
"toSubConnector": 0,
"color": " #00acc1"
},
"8": {
"fromOperator": 42,
"fromConnector": "output",
"fromSubConnector": 0,
"toOperator": 39,
"toConnector": "ins",
"toSubConnector": 1,
"color": " #00897b"
},
"9": {
"fromOperator": 39,
"fromConnector": "output",
"fromSubConnector": 0,
"toOperator": "1",
"toConnector": "ins",
"toSubConnector": 0,
"color": " #43a047"
},
"10": {
"fromOperator": 43,
"fromConnector": "output",
"fromSubConnector": 0,
"toOperator": "1",
"toConnector": "ins",
"toSubConnector": 1,
"color": " #7cb342"
}
},
"operatorTypes": {}
}
I want to use this for filtering data in tabulator so turn this into this:
[
{
"id": 1,
"pid": null
},
{
"id": 39,
"pid": 1
},
{
"id": 38,
"pid": 39
},
{
"id": 37,
"pid": 38
},
{
"id": 42,
"pid": 39
},
{
"id": 40,
"pid": 42
},
{
"id": 41,
"pid": 42
},
{
"id": 43,
"pid": 1
}
]
Then using this lines I turned into a tree:
const idMapping = data.reduce((acc, el, i) => {
acc[el.id] = i;
return acc;
}, {});
let root;
data.forEach(el => {
// Handle the root element
if (el.pid === null) {
root = el;
return;
}
// Use our mapping to locate the parent element in our data array
const parentEl = data[idMapping[el.pid]];
// Add our current el to its parent's `children` array
parentEl.children = [...(parentEl.children || []), el];
});
Here it is as a tree:
{
"id": 1,
"pid": null,
"children": [
{
"id": 39,
"pid": 1,
"children": [
{
"id": 38,
"pid": 39,
"children": [
{
"id": 37,
"pid": 38
}
]
},
{
"id": 42,
"pid": 39,
"children": [
{
"id": 40,
"pid": 42
},
{
"id": 41,
"pid": 42
}
]
}
]
},
{
"id": 43,
"pid": 1
}
]
}
Hovewer I want to simplify this further to just nested arrays of the id's. Like this:
[
1,
[
[
39,
[
[
38,
[
37
],
],
[
42,
[
40,
41
]
]
]
],
43
]
]
Question is, how to convert from tree to nested array?
You can use recursion to do this; leaf ids are passed upward without an array wrapper while interior node ids are wrapped in an array with a second element for their children.
const tree = { "id": 1, "pid": null, "children": [ { "id": 39, "pid": 1, "children": [ { "id": 38, "pid": 39, "children": [ { "id": 37, "pid": 38 } ] }, { "id": 42, "pid": 39, "children": [ { "id": 40, "pid": 42 }, { "id": 41, "pid": 42 } ] } ] }, { "id": 43, "pid": 1 } ] };
const objTreeToArrTree = node =>
node.children
? [node.id].concat([node.children.map(objTreeToArrTree)])
: node.id
;
console.log(JSON.stringify(objTreeToArrTree(tree), null, 2));
My response json is from the API is as follows:
{
"columnHeaders": [
{
"columnName": "id",
"columnType": "bigint",
"columnLength": 0,
"columnDisplayType": "INTEGER",
"isColumnNullable": false,
"isColumnPrimaryKey": true,
"columnValues": [],
"visibilityCriteria": []
},
{
"columnName": "client_id",
"columnType": "bigint",
"columnLength": 0,
"columnDisplayType": "INTEGER",
"isColumnNullable": false,
"isColumnPrimaryKey": false,
"columnValues": [],
"visibilityCriteria": []
},
{
"columnName": "countries",
"columnType": "int",
"columnLength": 0,
"columnDisplayType": "CODELOOKUP",
"isColumnNullable": false,
"isColumnPrimaryKey": false,
"displayName": "null",
"dependsOn": 0,
"orderPosition": 0,
"visible": false,
"mandatoryIfVisible": false,
"columnValues": [
{
"id": 19,
"value": "India",
"score": 0,
"parentId": 0
},
{
"id": 20,
"value": "USA",
"score": 0,
"parentId": 0
}
],
"columnCode": "countries",
"visibilityCriteria": []
}
}
]
now i want to add following json to my existing json data.
"columnValuesLookup": [
{
"id": 19,
"value": "English",
"score": 0,
"parentId": 0
},
{
"id": 20,
"value": "SA",
"score": 0,
"parentId": 0
}
],
how do i add json data to a specific index in existing json object so that my final json looks like
{
"columnHeaders": [
{
"columnName": "id",
"columnType": "bigint",
"columnLength": 0,
"columnDisplayType": "INTEGER",
"isColumnNullable": false,
"isColumnPrimaryKey": true,
"columnValues": [],
"visibilityCriteria": []
},
{
"columnName": "client_id",
"columnType": "bigint",
"columnLength": 0,
"columnDisplayType": "INTEGER",
"isColumnNullable": false,
"isColumnPrimaryKey": false,
"columnValues": [],
"visibilityCriteria": []
},
{
"columnName": "countries",
"columnType": "int",
"columnLength": 0,
"columnDisplayType": "CODELOOKUP",
"isColumnNullable": false,
"isColumnPrimaryKey": false,
"displayName": "null",
"dependsOn": 0,
"orderPosition": 0,
"visible": false,
"mandatoryIfVisible": false,
"columnValues": [
{
"id": 19,
"value": "India",
"score": 0,
"parentId": 0
},
{
"id": 20,
"value": "USA",
"score": 0,
"parentId": 0
}
],
"columnValuesLookup": [
{
"id": 19,
"value": "English",
"score": 0,
"parentId": 0
},
{
"id": 20,
"value": "SA",
"score": 0,
"parentId": 0
}
],
"columnCode": "countries",
"visibilityCriteria": []
}
}
]
var o = JSON.parse(json1)
o.columnHeaders[2].columnValuesLookup = JSON.parse(json2).columnValuesLookup
JSON.stringify(o)
I need a little help converting the below code to have series data built from values returned from a DB.
var options = {
"chart": {
"type": "column",
"zoomType": "xy",
"inverted": true
},
"plotOptions": {
"series": {
"stacking": "percent"
},
"column": {
"allowPointSelect": true
},
"bar": {
"selected": true
}
},
"title": {
"text": "MT Messages"
},
"xAxis": {
"title": {
"text": null
},
"type": "category"
},
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data": [
[
"Today",
5
],
[
"This Week",
3
],
[
"Last Week",
4
],
[
"Last Month",
127
]
]
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": [
[
"Today",
2
],
[
"This Week",
2
],
[
"Last Week",
3
],
[
"Last Month",
20000
]
]
},
{
"index": 2,
"dataLabels": {
"enabled": true
},
"name": 202,
"data": [
[
"Today",
3
],
[
"This Week",
4
],
[
"Last Week",
4
],
[
"Last Month",
2
]
]
}
]
};
I've replace this with :
var data = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];
var barChart = $(function() {
$('#barChart').highcharts({
"chart": {
"type": "column",
"zoomType": "y",
"inverted": false
},
"plotOptions": {
"series": {
"stacking": "percent"
},
"column": {
"allowPointSelect": true
},
"bar": {
"selected": true
}
},
"title": {
"text": "MT Messages"
},
"xAxis": {
"title": {
"text": null
},
"type": "category"
},
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data":data
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": data
},
{
"index": 2,
"dataLabels": {
"enabled": true
},
"name": 202,
"data":data
}
]
});
});
but, all my columns contain the same values for each index
I may be looking at this all wrong, and perhaps my array needs to be something like:
data = ['Today',12,13,52],['This week', 123,3466,56]...etc
but this then fails to render the chart at all.
You are using the same data array values for each series, which is why they all look the same. I your first example, each series had a different set of data. To do this in the second, you should have a different data array for each series:
var data1 = [['Today', 12], ["This Week", 13], ["Last Week", 23], ["Last Month", 100]];
var data2 = [['Today', 5], ["This Week", 15], ["Last Week", 12], ["Last Month", 203]];
...
"series": [
{
"index": 0,
"dataLabels": {
"enabled": true
},
"name": 101,
"data":data1
},
{
"index": 1,
"dataLabels": {
"enabled": true
},
"name": 103,
"data": data2
},
etc.