How to map an array of strings to a multidimensional array - javascript

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;
}

Related

Array Diffing: Compare large arrays with item movement

I want to find differences between States in React. But also movements inside the state should be detected. For example, if I deleted the first item:
{"state":[
{"x": 1, "y": 3},
{"x": 4, "y": 5},
{"x": 2, "y": 6},
{"x": 0, "y": 9}
]
}
{"state":[
{"x": 4, "y": 5},
{"x": 2, "y": 6},
{"x": 0, "y": 9}
]
}
I use the jsondiffpatch package, but it works only when the last Item is deleted. but for diff(state, state1) I get this:
{
"state": {
"0": {
"x": [
1,
4
],
"y": [
3,
5
]
},
"1": {
"x": [
4,
2
],
"y": [
5,
6
]
},
"2": {
"x": [
2,
0
],
"y": [
6,
9
]
},
"_t": "a",
"_3": [
{
"x": 0,
"y": 9
},
0,
0
]
}
}
But I want to check if an item was just moved also. So the Difference should be:
{
"state": {
"0": [
{
"x": 1,
"y": 3
},
0,
0
]
}
}
I use the diff and patch from jsondiffpatch for an undo function and the undo state.
Is this possible?
Thank you!
You basically want to get the difference or we can say the intersection of two arrays.
You can use Lodash or Ramda to get your desired output.
Both of them has a variety of util functions available.

sum of two objects and show the result in json format

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; }

JSON object using java

I have json format which I want to create in java code using JSONObject and JSONArray but I did not get output in proper format. JSON format is as below.
var transaction_Data =
[
{
"key": "PASSED",
"values": [
{"x": "20 June", "y": 30},
{"x": "21 June", "y": 50},
{"x": "22 June", "y": 20},
{"x": "23 June", "y": 60},
{"x": "19 June", "y": 20},
{"x": "24 June", "y": 10}
]
},
{
"key": "FAILED",
"values": [
{"x": "19 June", "y": 50},
{"x": "21 June", "y": 30},
{"x": "20 June", "y": 20},
{"x": "23 June", "y": 70},
{"x": "22 June", "y": 45},
{"x": "24 June", "y": 60}
]
}
]
How can I create this json object in java because I want to use this object for creating multibar graph using NVD3. Any help is greatly appreciated!
you can try it out with this POJOs.
class TransactionData {
private String key;
private List<Data> values;
public TransactionData(String key, List<Data> values) {
this.key = key;
this.values = values;
}
}
class Data {
private String x;
private Integer y;
public Data(String x, Integer y) {
this.x = x;
this.y = y;
}
}

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.

D3 - Help Required in d3.nest

I've got a d3.nest function which gives me the data in the following format.
[
{
"key": "Level1",
"values": [
{
"x": 118,
"y": 106,
"size": 1.113207547
},
{
"x": 111,
"y": 137,
"size": 0.810218978
},
{
"x": 144,
"y": 195,
"size": 0.738461538
},
{
"x": 116,
"y": 129,
"size": 0.899224806
},
{
"x": 117,
"y": 119,
"size": 0.983193277
},
{
"x": 145,
"y": 122,
"size": 1.18852459
}
],
"slope": 0.52289599949494,
"intercept": 0.2795214697252959
},
{
"key": "Level2",
"values": [
{
"x": 172,
"y": 193,
"size": 0.89119171
},
{
"x": 138,
"y": 114,
"size": 1.210526316
},
{
"x": 106,
"y": 189,
"size": 0.560846561
},
{
"x": 123,
"y": 141,
"size": 0.872340426
},
{
"x": 129,
"y": 110,
"size": 1.172727273
},
{
"x": 162,
"y": 198,
"size": 0.818181818
}
],
"slope": 0.52289599949494,
"intercept": 0.2795214697252959
},
{
"key": "Level3",
"values": [
{
"x": 191,
"y": 104,
"size": 1.836538462
},
{
"x": 177,
"y": 186,
"size": 0.951612903
},
{
"x": 106,
"y": 140,
"size": 0.757142857
},
{
"x": 131,
"y": 161,
"size": 0.813664596
},
{
"x": 111,
"y": 128,
"size": 0.8671875
},
{
"x": 149,
"y": 122,
"size": 1.221311475
},
{
"x": 200,
"y": 126,
"size": 1.587301587
}
],
"slope": 0.52289599949494,
"intercept": 0.2795214697252959
}
]
I'd want to exclude only the "type" from the values. Somebody help me on how to do it.
Function i used to get that data is below.
d3.csv("data.csv", function(data) {
data.forEach(function(d) {
d.x = +d.x
d.y = +d.y
d.size = +d.size
})
var nest = d3.nest()
.key(function(d) {return d.type;})
.rollup(function(v) {return v.map(function(d) {return d})})
.entries(data);
d3.select('body').append('pre')
.text(JSON.stringify(nest, null, ' '));
})
If you do not want type to be present in returned array, you can delete it while doing the rollUp:
.rollUp(function (v) { return v.map(function (d) { delete d.type; return d; })
Do note that it will referentially delete 'type' from the original data set as well. If you do not want that to happen, then $.extend or otherwise clone the data in the rollUp function.

Categories