We Keep Coding

Help with JSON raw format in javascript - javascript

I have a JSON array of data which is
[ [[2, 5], [6, 10], [10, 7], [11, 15]],
[[0, 9], [1, 16], [3, 19], [4, 15]],
[[0, 7], [5, 16], [8, 17], [12, 19]] ]
but when I try to get the first array of [[2, 5], [6, 10], [10, 7], [11, 15]] using jsonData[0] I get the data as 2,5,6,10,10,7,11,15.
I would like to get the data in the JSON format and not the plain text format. Any ideas?

You should get the data as an array. Did you alert jsonData[0] because that will display the results as a flattened string.
Instead console.log(jsonData[0]) to see the actual array.
Here's the output I see when using your array.
var a = [[[2, 5], [6, 10], [10, 7], [11, 15]],[[0, 9], [1, 16], [3, 19], [4, 15]],[[0, 7], [5, 16], [8, 17], [12, 19]]];
alert(a[0]); // 2,5,6,10,10,7,11,15
console.log(a[0]); // [[2, 5], [6, 10], [10, 7], [11, 15]]
See an example.
Also, "JSON raw format" is misleading. What you have is a plain JavaScript array.

Are you asking how to convert it to a JSON string rather than simply getting the default toString behaviour of an array? If so you should just do:
JSON.stringify(jsonData[0])
Or whatever it is you want to stringify

Related

I have a 2d array in the following format:
export const dataBubble = [
[0, 0, 0],
[0, 1, 0],
[0, 2, 0],
[0, 3, 0],
[0, 4, 0],
[0, 5, 0],
[0, 6, 0],
[0, 7, 0],
[0, 8, 0],
[0, 9, 0],
[0, 10, 0],
[1, 0, 6],
[1, 1, 8],
[1, 2, 5],
[1, 3, 6],
[1, 4, 1],
[1, 5, 4],
[1, 6, 5],
[1, 7, 5],
[1, 8, 4],
[1, 9, 3],
[1, 10, 9],
[2, 0, 5],
[2, 1, 5],
[2, 2, 5],
[2, 3, 6],
[2, 4, 8],
[2, 5, 7],
[2, 6, 8],
[2, 7, 5],
[2, 8, 4],
[2, 9, 2],
[2, 10, 8],
[3, 0, 9],
[3, 1, 5],
[3, 2, 9],
[3, 3, 8],
[3, 4, 5],
[3, 5, 4],
[3, 6, 2],
[3, 7, 5],
[3, 8, 7],
[3, 9, 6],
[3, 10, 3],
[4, 0, 7],
[4, 1, 3],
[4, 2, 9],
[4, 3, 5],
[4, 4, 11],
[4, 5, 6],
[4, 6, 7],
[4, 7, 6],
[4, 8, 4],
[4, 9, 4],
[4, 10, 5],
[5, 0, 1],
[5, 1, 3],
[5, 2, 6],
[5, 3, 8],
[5, 4, 5],
[5, 5, 5],
[5, 6, 4],
[5, 7, 8],
[5, 8, 9],
[5, 9, 2],
[5, 10, 4],
[6, 0, 2],
[6, 1, 1],
[6, 2, 0],
[6, 3, 3],
[6, 4, 8],
[6, 5, 5],
[6, 6, 6],
[6, 7, 2],
[6, 8, 5],
[6, 9, 6],
[6, 10, 4],
[7, 0, 1],
[7, 1, 0],
[7, 2, 5],
[7, 3, 0],
[7, 4, 5],
[7, 5, 8],
[7, 6, 9],
[7, 7, 0],
[7, 8, 7],
[7, 9, 8]
];
We need to reverse the array elements based on the first two elements of the inner array, such that the resultant array becomes:
[
[0,10,0],
[0,9,0],
[0,8,0],
[0,7,0],
[0,6,0],
[0,5,0],
[0,4,0],
[0,3,0],
[0,2,0],
[0,1,0],
[1,10,9],
[1,9,3],
[1,8,4],
[1,7,5],
.
.
.
.
.
.
.
.
.
[7,0,1]
I use this in a react js project, so is there anyway we can use the JS map function of an array to do it? If not what will be the optimal solution?

If your second value is guaranteed to be less than an amount (for example I assumed 1000 in this case) then you can do this:
dataBubble.sort((x, y) => (x[0] - y[0])*1000 + y[1] - x[1]);
Basically we sum them up, but give the first element a higher coefficient, thus making it the primary sorter.
Otherwise, you need to involve an if check:
dataBubble.sort((x, y) => {
if(x[0] == y[0]) {
return y[1] - x[1];
} else {
return x[0] - y[0];
}
});
If you return a negative value from the sort function, JS will put x before y. Otherwise it will put x after y.
If x[0] and y[0] are equal, we need to sort depending on x[1] and y[1]. y[1] - x[1] will be negative if x[1] is larger, therefore if x[1] is larger x will come before y.
If x[0] and y[0] are different we need to sort based on them. x[0] - y[0] will be negative if x[0] is smaller, therefore if x[0] is smaller, x will come before y.

I have the following array:
const arr = [
[5, 0.2],
[7, 0.6],
[8, 0.3],
[10, 0.4]
];
console.log(arr)
I need to ensure that the first element of the array is a sequence from 5 to 10:
[5, 6, 7, 8, 9, 10]
In the above example, these numbers within the sequence are missing:
[6, 9]
If they are missing, I need to include them with zeros:
const expectedResult = [
[5, 0.2],
[6, 0],
[7, 0.6],
[8, 0.3],
[9, 0],
[10, 0.4]
];
console.log(expectedResult)
Any ideas on how to achieve this?

You could map the missing parts with a closure over the actual index of the given array.
const
array = [[5, 0.2], [7, 0.6], [8, 0.3], [10, 0.4]],
result = Array.from(
{ length: 6 },
(i => (_, j) => array[i]?.[0] === j + 5 ? array[i++] : [j + 5, 0])(0)
);
console.log(result);

As we know normally we can pass array as following to Flot Aria Chart.
var data2 = [
[0, 1], [1, 0], [2, 2], [3, 0], [4, 1], [5, 3], [6, 1], [7, 5], [8, 2], [9, 3], [10, 2], [11, 1], [12, 0], [13, 2], [14, 8], [15, 0], [16, 0]
];
I'm getting an json output from a file and i need to convert that as json object like 'data2' in upper code. i'm running a loop like this.
var data1 = [];
var json = $.getJSON( "config/tsconfig.json", function () {
$.each( json.responseJSON, function( i, item ) {
});
});
And inside of that json file like this.
[[2,"2017-09-27",50,30,25],[2,"2017-09-28",70,50,49],[3,"2017-09-27",50,45,5],[3,"2017-09-28",100,95,90]]
How can i make a json object as in code one. any suggestions to put inside $.each loop?

You have to use map method.
Also, $.getJSON is executing asynchronous, so you need to use a callback function.
getResponse(callback){
$.getJSON( "config/tsconfig.json", function (response) {
let result=response.map(function(item){
return [item[0],item[2]];
});
callback(result);
});
}
getResponse(function(response){
console.log(response);
});
let array=[[2,"2017-09-27",50,30,25],[2,"2017-09-28",70,50,49],[3,"2017-09-27",50,45,5],[3,"2017-09-28",100,95,90]]
array=array.map(function(item){
return [item[0],item[2]];
});
console.log(array);
Using arrow functions.
array=array.map(item=> [item[0],item[2]]);

I am using a javascript library caleed JSCharts for generating line, bar graphs and so on. Everything is working like it should, I can provide a working example:
var myData = new Array(['2013-01-24', 117], ['2013-01-25', 91], ['2013-01-26', 90], ['2013-01-27', 128], ['2013-01-28', 168], ['2013-01-29', 169], ['2013-01-30', 146], ['2013-01-31', 48], ['2013-02-01', 66], ['2013-02-02', 48], ['2013-02-03', 90], ['2013-02-04', 138], ['2013-02-05', 77], ['2013-02-06', 55], ['2013-02-07', 79], ['2013-02-08', 63], ['2013-02-09', 35], ['2013-02-10', 63], ['2013-02-11', 90], ['2013-02-12', 80], ['2013-02-13', 48], ['2013-02-14', 62], ['2013-02-15', 71], ['2013-02-16', 52], ['2013-02-17', 95], ['2013-02-18', 69], ['2013-02-19', 94], ['2013-02-20', 119], ['2013-02-21', 725], ['2013-02-22', 1348], ['2013-02-23', 1244], ['2013-02-24', 607], ['2013-02-25', 585], ['2013-02-26', 941], ['2013-02-27', 1466], ['2013-02-28', 1015], ['2013-03-01', 1626], ['2013-03-02', 965], ['2013-03-03', 875], ['2013-03-04', 841], ['2013-03-05', 969], ['2013-03-06', 710], ['2013-03-07', 566], ['2013-03-08', 660], ['2013-03-09', 622], ['2013-03-10', 651], ['2013-03-11', 679], ['2013-03-12', 812], ['2013-03-13', 754], ['2013-03-14', 669], ['2013-03-15', 661], ['2013-03-16', 328], ['2013-03-17', 529], ['2013-03-18', 552], ['2013-03-19', 647], ['2013-03-20', 462], ['2013-03-21', 452], ['2013-03-22', 157], ['2013-03-23', 188], ['2013-03-24', 103], ['2013-03-25', 152], ['2013-03-26', 155], ['2013-03-27', 165], ['2013-03-28', 952], ['2013-03-29', 1135], ['2013-03-30', 915], ['2013-03-31', 996], ['2013-04-01', 400], ['2013-04-02', 204], ['2013-04-03', 145], ['2013-04-04', 164], ['2013-04-05', 1248], ['2013-04-06', 517], ['2013-04-07', 300], ['2013-04-08', 494], ['2013-04-09', 248], ['2013-04-10', 220], ['2013-04-11', 245], ['2013-04-12', 152], ['2013-04-13', 109], ['2013-04-14', 293], ['2013-04-15', 207], ['2013-04-16', 120], ['2013-04-17', 528], ['2013-04-18', 266], ['2013-04-19', 286], ['2013-04-20', 313], ['2013-04-21', 162], ['2013-04-22', 310]);
console.log("myData: " + Object.prototype.toString.call(myData));
var myChart = new JSChart('116376655202954_3months_page_views_chartcontainer', 'line');
myChart.setDataArray(myData);
myChart.setSize(960, 320);
myChart.setAxisNameX('');
myChart.setAxisValuesColorX('#FFFFFF');
myChart.setAxisNameY('');
myChart.setTitle('Page Views in the last 3 months');
Chart.draw();
My issue is that now I make an Ajax GET request to a php file that sends me as response the following:
['2013-02-24', 10], ['2013-02-25', 17], ['2013-02-26', 23], ['2013-02-27', 13], ['2013-02-28', 11], ['2013-03-01', 12], ['2013-03-02', 6], ['2013-03-03', 20], ['2013-03-04', 21], ['2013-03-05', 18], ['2013-03-06', 12], ['2013-03-07', 17], ['2013-03-08', 10], ['2013-03-09', 7], ['2013-03-10', 6], ['2013-03-11', 13], ['2013-03-12', 24], ['2013-03-13', 20], ['2013-03-14', 15], ['2013-03-15', 12], ['2013-03-16', 4], ['2013-03-17', 21], ['2013-03-18', 18], ['2013-03-19', 21], ['2013-03-20', 10], ['2013-03-21', 4], ['2013-03-22', 2], ['2013-03-23', 9], ['2013-03-24', 7], ['2013-03-25', 13], ['2013-03-26', 2], ['2013-03-27', 9], ['2013-03-28', 15], ['2013-03-29', 14], ['2013-03-30', 29], ['2013-03-31', 19], ['2013-04-01', 6], ['2013-04-02', 4], ['2013-04-03', 7], ['2013-04-04', 5], ['2013-04-05', 56], ['2013-04-06', 3], ['2013-04-07', 2], ['2013-04-08', 11], ['2013-04-09', 4], ['2013-04-10', 7], ['2013-04-11', 1], ['2013-04-12', 6], ['2013-04-13', 2], ['2013-04-14', 2], ['2013-04-15', 6], ['2013-04-16', 3], ['2013-04-17', 13], ['2013-04-18', 5], ['2013-04-19', 7], ['2013-04-20', 4], ['2013-04-21', 4], ['2013-04-22', 8]
Here is my code for the GET request:
function submitForm(t) {
var page_id = String("#" + $(t).attr('id'));
$.ajax({type:'GET', url: 'charts.php', data:$(page_id).serialize(), success:
function(response) {
document.getElementById('<?php echo $account['id']; ?>_fan_removes').style.display = "block";
console.log(response);
var myFanRemovesData = new Array(response);
console.log(myFanRemovesData);
var myChart = new JSChart('116376655202954_fan_removes', 'line');
myChart.setDataArray(myFanRemovesData);
myChart.setSize(960, 320);
myChart.setAxisNameX('');
myChart.setAxisValuesColorX('#FFFFFF');
myChart.setAxisNameY('');
myChart.setTitle('Page Fan Removes in the last 2 months');
myChart.draw();
}});
return false;
};
I know that the response is a string and I want it to be placed like in the working example but I can't get it to work properly. The myData and myFanRemovesData are [object Array] but if I use console.log on both I receive the following:
For myData:
[Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], Array[2], ... ]
which is an array of arrays and for myFanRemovesData:
["['2013-02-24', 10], ['2013-02-25', 17], ['2013-02-…-04-20', 4], ['2013-04-21', 4], ... "]
I've tried to convert the response to array but with no visible success. I don't know what to do next so any suggestions and guidance is more than welcomed.

Your php file is returning you a string. You need to convert it to JSON before parsing it in Jquery.
For more info, check this tutorial: http://www.islandsmooth.com/2010/04/send-and-receive-json-data-using-ajax-jquery-and-php/

I have 3 arrays in javascript. I'd like to combine them all into 1 var, but name each item (like PHP's associate array). So the first item is red, second is green, third is blue. And then how do I call each item separately after?
[[2, 1], [4, 1], [10, 1], [19, 1]],
[[3, 1], [14, 1], [18, 1], [19, 1]],
[[7, 1], [6, 1], [8, 1], [17, 1]]

Do you mean something like this?
var combined = {
red: [[2, 1], [4, 1], [10, 1], [19, 1]],
green: [[3, 1], [14, 1], [18, 1], [19, 1]],
blue: [[7, 1], [6, 1], [8, 1], [17, 1]]
};
Then you can access the arrays as combined.red, combined.green, and combined.blue.