Level 102
You can just return an array of the data and laravel will convert it to json. Or use api resources
1 like
Jan 13, 2023
11
Level 2
how to pass json arrays as arguments in ajax call in laravel blade file
i want to send a response as argument in ajax call to jquery highchart here is code
function my_chart(response) {
$('#container').highcharts('StockChart', {
series: [{
type: 'candlestick',
id: 'aapl',
name: 'AAPL Stock Price',
data: response
}]
});
}
i make argument for response that will get from ajax call
chart();
function chart() {
$.ajax({
type: "GET",
url: "/candle",
dataType: "json",
success: function(response) {
console.log(response);
let parsed_response = (response);
my_chart(parsed_response);
}
});
}
need to pass json response that get from laravel controller as
0: Object { id: 1, openprice: "0.0009", closeprice: "0.0010", … }
1: Object { id: 17, openprice: "0.0010", closeprice: "0.0029", … }
2: Object { id: 18, openprice: "0.0029", closeprice: "0.0020", … }
3: Object { id: 19, openprice: "0.0020", closeprice: "0.0010", … }
4: Object { id: 20, openprice: "0.0010", closeprice: "0.0015", … }
5: Object { id: 21, openprice: "0.0015", closeprice: "0.0017", … }
this json response array need to pass as argument in here
success: function(response) {
console.log(response.priceall);
let parsed_response = jQuery.parseJSON(response.priceall);
my_chart(parsed_response);
}
how can pass this json arrays in parsed_response variable ,
this json array will assign as argument response
function my_chart(response) {
$('#container').highcharts('StockChart', {
series: [{
type: 'candlestick',
id: 'aapl',
name: 'AAPL Stock Price',
data: response
}]
});
}
in data : response as
data : []
when i pass as
success: function(response){
//call my_chart function
console.log(response.priceall);
let parsed_response = jQuery.parseJSON(response.priceall);
my_chart(parsed_response);
},
show error
Uncaught SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data
why this happen i not know
can someone help me .
Level 2
@Sinnbeck need to explain more , plz check my question ,
Level 102
@zwarkyaw I did, but I don't see your controller method for the json data? You can just do a foreach over each item and format it how you want.
I was just working with highcharts today actually :)
1 like
Level 2
@Sinnbeck here controller
$priceall = Price ::get();
return response()->json([
'priceall' => $priceall
]);
normally this json response can loop as follow in other case
$.each(response.priceall, function(key, item) {
item.openprice ,
item.closeprice
}
but in this case , i not sure .
Level 102
@zwarkyaw you can use console.log to see your data. Personally I would format the data in php before sending it as json
2 likes
Level 2
@Sinnbeck i check in console
Array(18) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
0: Object { id: 1, openprice: "0.0009", closeprice: "0.0010", … }
1: Object { id: 17, openprice: "0.0010", closeprice: "0.0029", … }
2: Object { id: 18, openprice: "0.0029", closeprice: "0.0020", … }
3: Object { id: 19, openprice: "0.0020", closeprice: "0.0010", … }
4: Object { id: 20, openprice: "0.0010", closeprice: "0.0015", … }
5: Object { id: 21, openprice: "0.0015", closeprice: "0.0017", … }
6: Object { id: 22, openprice: "0.0017", closeprice: "0.0010", … }
7: Object { id: 23, openprice: "0.0010", closeprice: "0.0010", … }
8: Object { id: 24, openprice: "0.0010", closeprice: "0.0009", … }
9: Object { id: 25, openprice: "0.0009", closeprice: "0.0010", … }
10: Object { id: 26, openprice: "0.0011", closeprice: "0.0010", … }
in this case i just need to pass this arrays , as variable to send as argument response.
Level 2
@Sinnbeck can format this laravel json array by API resource as
const data = [
[1598880600000, 127.58, 131, 126, 129.04],
[1598967000000, 132.76, 134.8, 130.53, 134.18],
[1599053400000, 137.59, 137.98, 127, 131.4],
]
if so , can set as variable this json array
Level 1
@zwarkyaw you are trying to reparse the data as json but I guess there is no need to do so. You have already set dataType:json on the ajax call. Try this: Let's say $priceall is the array you want to return that has the structure:
Array(18) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
- 0: Object { id: 1, openprice: "0.0009", closeprice: "0.0010", … }
On your controller: return response()->json($priceall);
on your js: dataType: "json", success: function(response){ console.log(response[0].id); my_chart(response); },
Could you console.log lets say response[0].id and check the result
1 like
Level 2
@pmantzar console.log(response.priceall[0].id);
show 1
Level 1
@zwarkyaw Does Highcharts request a specific structure on the data variable? if not you could just pass response.priceall . In any other occasion just parse with foreach the response.priceall table and create the respective arrays to pass to my_chart. I would go on with normalizing the array on the controller but this approach will work too.
1 like
Level 2
@pmantzar cannot get respective arrays by foreach , highchart need specific structure ,candlestick data , so need to do foreach loop to this response.priceall, i tried but cannot get serial arrays , get separate arrays ,
$.each(response.priceall, function(key, item) {
let date = new Date(item.created_at);
let open = item.openprice;
let close = item.closeprice;
let high = item.highprice;
let low = item.lowprice;
const data = [
date.getTime(), parseFloat(item.openprice), parseFloat(item
.highprice), parseFloat(item.lowprice), parseFloat(
item.closeprice)
]
console.log(data)
});
i try to get data as specific structure to set in highchart data, but this looping not get require aray , it only show separate arrays looping ,
Array(5) [ 1673497926000, 0.001, 0.003, 0.0009, 0.0029 ]
Array(5) [ 1673501546000, 0.0029, 0.0032, 0.0009, 0.002 ]
Array(5) [ 1673505726000, 0.002, 0.0025, 0.0009, 0.001 ]
so candlestick always show only one candle, what wrong in jquery for each loop ,
Please or to participate in this conversation.