sum of two objects and show the result in json format - javascript

I have two objects.
Scenario: I want a function that sums up two different objects which is stored in the local file, and returns an object in the same style as other two objects.
First JSON
{
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 0],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,200,700]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 0, 879]
}]
}
Second JSON
{
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 200],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,400,555]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 30, 879]
}]
}
result will be sum of both objects
{
"data": [{
"x": "Q1 (J, F, M)",
"y": [200, 1000, 200],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [600, 200, 200]
}, {
"x": "Q3(J, A, S)",
"y": [702,600,1255]
}, {
"x": "Q4 (Q, N, D)",
"y": [108, 30, 1758]
}]
}
Does anyone know of a solution to this?

Assuming your arrays have always the same number of elements (4 in the example, 1 for each quarter), then you could use this ES6 function:
function addObjects(obj1, obj2) {
return obj1.data.map( (o1, i) => Object.assign({}, o1,
{ y: o1.y.map( (n1, j) => n1 + obj2.data[i].y[j] ) }
));
}
// Sample data
var obj1 = {
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 0],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,200,700]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 0, 879]
}]
};
var obj2 = {
"data": [{
"x": "Q1 (J, F, M)",
"y": [100, 500, 200],
"tooltip": "this is tooltip"
}, {
"x": "Q2(A, M, J)",
"y": [300, 100, 100]
}, {
"x": "Q3(J, A, S)",
"y": [351,400,555]
}, {
"x": "Q4 (Q, N, D)",
"y": [54, 30, 879]
}]
};
console.log(addObjects(obj1, obj2));
.as-console-wrapper { max-height: 100% !important; top: 0; }

Related

How to map an array of strings to a multidimensional array

I am trying to create a multidimensional array by mapping an array of strings to a 2D array.
var dataFieldArray = ["LegPenetration", "Temperature"];
var multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}],
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]]
The expected output should be as follows:
var data = [[{"field": LegPenetration, "x": 0, "y": 0}, {"field": LegPenetration, "x": 10, "y": 20}, {"field": LegPenetration, "x": 20, "y": 30}, {"field": LegPenetration, "x": 30, "y": 40}, {"field": LegPenetration, "x": 40, "y": 50}],
[{"field": Temperature, "x": 0, "y": 0}, {"field": Temperature, "x": 10, "y": 200}, {"field": Temperature, "x": 20, "y": 250}, {"field": Temperature, "x": 30, "y": 400}, {"field": Temperature, "x": 40, "y": 450}]]
In the code below, I have mapped xValueArray and yValueArray together to get the resulting 2D array as shown above. I have tried mapping the dataField array the same way but to no avail. Any help is greatly appreciated!
const yValueArray = [[0, 20, 30, 40, 50], [0, 200, 250, 400, 450]];
const xValueArray = [0, 10, 20, 30, 40];
const data = yValueArray.map(data =>
data.map((d, i) => ({
x: xValueArray[i],
y: d
}))
);
It sounds like you want to add a field property. Here's a way to do that that doesn't modify the original objects using only ES5-level language features and Object.assign (which is ES2015, but polyfillable):
var result = multidimensionalArray.map(function(array, index) {
var field = dataFieldArray[index];
return array.map(function(object) {
return Object.assign({}, object, {field: field});
});
});
Live Example:
var dataFieldArray = ["LegPenetration", "Temperature"];
var multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}],
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]];
var result = multidimensionalArray.map(function(array, index) {
var field = dataFieldArray[index];
return array.map(function(object) {
return Object.assign({}, object, {field: field});
});
});
console.log(result);
.as-console-wrapper {
max-height: 100% !important;
}
Or with ES2015 and ES2018 features:
const result = multidimensionalArray.map((array, index) =>
array.map(object => ({...object, field: dataFieldArray[index]}))
);
Live Example:
const dataFieldArray = ["LegPenetration", "Temperature"];
const multidimensionalArray = [[{"x": 0, "y": 0}, {"x": 10, "y": 20}, {"x": 20, "y": 30}, {"x": 30, "y": 40}, {"x": 40, "y": 50}],
[{"x": 0, "y": 0}, {"x": 10, "y": 200}, {"x": 20, "y": 250}, {"x": 30, "y": 400}, {"x": 40, "y": 450}]];
const result = multidimensionalArray.map((array, index) =>
array.map(object => ({...object, field: dataFieldArray[index]}))
);
console.log(result);
.as-console-wrapper {
max-height: 100% !important;
}

Compare and sort array using javascript

For the following
array1 = [{
"x": 0,
"y": 1,
"z": 1,
"i": "chart1"
}, {
"x": 0,
"y": 2,
"z": 1,
"i": "chart2"
}, {
"x": 1,
"y": 1,
"z": 1,
"i": "chart3 "
}
]
array2 = [{
"x": 1,
"y": 1,
"z": 1,
"i": "chart1"
}, {
"x": 0,
"y": 1,
"z": 1,
"i": "chart2"
}, {
"x": 0,
"y": 2,
"z": 1,
"i": "chart3"
}
]
compare x and y of array1 and array2 and find the position if it is equal and return the set of array of i value.
i.e in above case it should return:
array3=["chart2","chart3","chart1"]
I have a json as below:
json = [{
"visType:" bar "," visName ":" chart1 "},{" visType: "bar",
"visName": "chart2"
}, {
"visType:" Pie "," visName ":" chart3 "}]
And this need to be sort based on array3 = ["chart2","chart3","chart1"] the output should be as in updated json
updatedjson = [{
"visType:" bar "," visName ":" chart2 "},{" visType: "Pie",
"visName": "chart3"
}, {
"visType:" bar "," visName ":" chart1 "}]
I need a solution using lodash or javascript.
const array3 = [...array1, ...array2].filter(({x,y}) => x===y);
const updatedjson = array3.map(({i}) => json.find(({visName}) => i === visName));
Edit: Fixed the input data which was full of syntax errors:
var array1 = [{ "x": 0, "y": 1, "z": 1, "i": "chart1" }, { "x": 0, "y": 2, "z": 1, "i": "chart2" }, { "x": 1, "y": 1, "z": 1, "i": "chart3" }];
var array2 = [{ "x": 1, "y": 1, "z": 1, "i": "chart1" }, { "x": 0, "y": 1, "z": 1, "i": "chart2" }, { "x": 0, "y": 2, "z": 1, "i": "chart3" }];
var json = [
{ "visType": "bar", "visName": "chart1" },
{ "visType": "bar", "visName": "chart2" },
{ "visType": "Pie", "visName": "chart3" }
];
const array3 = [...array1, ...array2].filter(({ x, y }) => x === y);
const updatedjson = array3.map(({ i }) => json.find(({ visName }) => i === visName));
console.log(array3);
console.log(updatedjson);

Turn words array from a document with their coordinates into sentences

I have an array of words with their coordinates in the document, I want to turn them into sentences.
My array input:
[
{
"bounds": [
{
"x": 10,
"y": 10
},
{
"x": 15,
"y": 10
},
{
"x": 15,
"y": 15
},
{
"x": 10,
"y": 15
}
],
"desc": "Hey"
},
{
"bounds": [
{
"x": 18,
"y": 10
},
{
"x": 24,
"y": 10
},
{
"x": 24,
"y": 15
},
{
"x": 18,
"y": 15
}
],
"desc": "Name"
},
{
"bounds": [
{
"x": 18,
"y": 20
},
{
"x": 24,
"y": 20
},
{
"x": 24,
"y": 25
},
{
"x": 18,
"y": 25
}
],
"desc": "What"
},
{
"bounds": [
{
"x": 18,
"y": 20
},
{
"x": 24,
"y": 20
},
{
"x": 24,
"y": 25
},
{
"x": 18,
"y": 25
}
],
"desc": "Sup"
}
]
The program output should be:
Hey Name
What Sup
The coordinates are not accurate just an example, also the algorithm needs to deal with words that are in the middle of sentences and other extreme cases.
What it the best way I can do it (Ideally implemented with JavaScript)?
You could use a hash table and order it for lines and positions, then get the text in this order back.
var data = [{ bounds: [{ x: 10, y: 10 }, { x: 15, y: 10 }, { x: 15, y: 15 }, { x: 10, y: 15 }], desc: "Hey" }, { bounds: [{ x: 18, y: 10 }, { x: 24, y: 10 }, { x: 24, y: 15 }, { x: 18, y: 15 }], desc: "Name" }, { bounds: [{ x: 18, y: 20 }, { x: 24, y: 20 }, { x: 24, y: 25 }, { x: 18, y: 25 }], desc: "What" }, { bounds: [{ x: 18, y: 20 }, { x: 24, y: 20 }, { x: 24, y: 25 }, { x: 18, y: 25 }], desc: "Sup" }],
hash = {},
result;
data.forEach(function (a) {
hash[a.bounds[0].y] = hash[a.bounds[0].y] || {};
hash[a.bounds[0].y][a.bounds[0].x] = hash[a.bounds[0].y][a.bounds[0].x] || [];
hash[a.bounds[0].y][a.bounds[0].x].push({ desc: a.desc, end: a.bounds[2] });
});
result = Object.keys(hash)
.sort((a, b) => a - b)
.map(k => Object.keys(hash[k])
.sort((a, b) => a - b)
.reduce((r, l) => [...r, ...hash[k][l].map(c => c.desc)], [])
.join(' ')
)
.join('\n');
console.log(result);
console.log(hash);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Highcharts min and max xAxis

I have a problem with Hightcharts.
I want to display my graph in a complete day (between 08/12/2012 0:00 and 08/12/2012 23:59)
So I use the xAxis.min and xAxis.max of the Highcharts documentation.
But when I display my graph I don't see the min and max value.
"ic": "images/ciblerouge.png",
"icTrack": "",
"color": "255,0,0,0.5",
"title": "skywaveUnitTest - 08/10/2012",
"xAxis": {
"min": 1349661600000,
"max": 1349747999000,
"startOnTick": false
},
"aData": [{
"name": "Vitesse (Km/h)",
"data": [{
"x": 1349711130233,
"y": 10,
"l": 16789
},
{
"x": 1349711388379,
"y": 10,
"l": null
},
{
"x": 1349711388380,
"y": 290,
"l": 16790
},
{
"x": 1349711861797,
"y": 290,
"l": 16791
},
{
"x": 1349717896097,
"y": 290,
"l": 16792
},
{
"x": 1349718759813,
"y": 290,
"l": 16793
},
{
"x": 1349719132107,
"y": 290,
"l": 16794
}],
"visible": true,
"yAxis": 1,
"marker": {
"enabled": false,
"radius": 0
}
},
{
"name": "Altitude",
"data": [{
"x": 1349711130233,
"y": 0,
"l": 16789
},
{
"x": 1349711388379,
"y": 0,
"l": null
},
{
"x": 1349711388380,
"y": -800,
"l": 16790
},
{
"x": 1349711861797,
"y": -800,
"l": 16791
},
{
"x": 1349717896096,
"y": -800,
"l": null
},
{
"x": 1349717896097,
"y": 0,
"l": 16792
},
{
"x": 1349718759812,
"y": 0,
"l": null
},
{
"x": 1349718759813,
"y": 2400,
"l": 16793
},
{
"x": 1349719132107,
"y": 2400,
"l": 16794
}],
"visible": false,
"yAxis": 1,
"marker": {
"enabled": false,
"radius": 0
}
}],

Graph not rendering correct scale with NVD3

I haven't been able to make the line chart render with a correct scale and the documentation is practically non existent for nvd3. It renders ok if I only use the first set of values (with the key Success).
I have a sample demo here: http://jsfiddle.net/LBqk3/1/
And the code / attached sample data:
nv.addGraph(function () {
var chart = nv.models.lineChart();
chart.xAxis.axisLabel('Requests')
.tickFormat(function (d) {
return d3.time.format('%d %b')(new Date(d));
});
var y = d3.scale.linear()
.range([400, 400]);
chart.yAxis.axisLabel('Amount')
.scale(y)
.tickFormat(d3.format('.2f'));
d3.select('#chart svg')
.datum([{
"values": [{
"x": 1387893600000,
"y": "170"
}, {
"x": 1387980000000,
"y": "416"
}, {
"x": 1388066400000,
"y": "743"
}, {
"x": 1388152800000,
"y": "633"
}, {
"x": 1388239200000,
"y": "500"
}, {
"x": 1388325600000,
"y": "604"
}, {
"x": 1388412000000,
"y": "683"
}, {
"x": 1388498400000,
"y": "485"
}, {
"x": 1388584800000,
"y": "509"
}, {
"x": 1388671200000,
"y": "677"
}, {
"x": 1388757600000,
"y": "610"
}, {
"x": 1388844000000,
"y": "607"
}, {
"x": 1388930400000,
"y": "538"
}, {
"x": 1389016800000,
"y": "596"
}, {
"x": 1389103200000,
"y": "609"
}, {
"x": 1389189600000,
"y": "581"
}, {
"x": 1389276000000,
"y": "503"
}, {
"x": 1389362400000,
"y": "524"
}, {
"x": 1389448800000,
"y": "515"
}, {
"x": 1389535200000,
"y": "580"
}, {
"x": 1389621600000,
"y": "592"
}, {
"x": 1389708000000,
"y": "573"
}, {
"x": 1389794400000,
"y": "597"
}, {
"x": 1389880800000,
"y": "717"
}, {
"x": 1389967200000,
"y": "2760"
}],
"key": "Missed"
}])
.transition()
.duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
The problem is that your y values are strings and you're treating them like numbers. Replacing
"y": "604"
with
"y": 604
and so on for all values should fix the issue.

Categories