Просмотр полной версии : Собрать массив
Привет. Ajax возвращает такой json
[{"sum":"40.00","title":"Еда"},{"sum":"40.00","title":"Еда"},{"sum":"100.00","title":"Акции"},{"sum":"1000.00","title":"Зарплата"},{"sum":"100.00","title":"Акции"}]
Подскажите как перебрать это дело,что бы получить массив следующего вида:
[{name:'Еда',data:[40.00,40.00]},{name:'Акции',data:[100,1000]}...]
ureech,
<script>
let ar = [{"sum":"40.00","title":"Еда"},{"sum":"40.00","title":"Еда"},{"sum":"100.00","title":"Акции"},{"sum":"1000.00","title":"Зарплата"},{"sum":"100.00","title":"Акции"}]
let keys = {}, out = [];
ar.forEach(({title: name, sum : data}) => name in keys ? keys[name].push(data) : (data = keys[name]=[data], out.push({name, data})));
document.write(`<pre>${JSON.stringify(out, "", 1)}</pre>`)
</script>
Спасибо,Так то всё верно,но не заводится), так как в моём скрипте name и data должны быть без кавычек. Они переменные.То есть так
name:"Еда",data:["40.00","40.00","40.00","40.00","40.00"]...
так как в моём скрипте name и data должны быть без кавычек.
бред какой-то.
Да нет). Есть скрипт для графиков. И там один из параметров такой.
var series =[{name:"...",data:[10,20,...]}]
https://coderlessons.com/tutorials/bolshie-dannye-i-analitika/uznaite-highcharts/highcharts-kratkoe-rukovodstvo
там в самом низу пример
ureech,
переменные можно использовать, а вот кавычки будут всегда.
<script>
let name = "it_is_name", data = "it_is_data";
let ar = [{"sum":"40.00","title":"Еда"},{"sum":"40.00","title":"Еда"},{"sum":"100.00","title":"Акции"},{"sum":"1000.00","title":"Зарплата"},{"sum":"100.00","title":"Акции"}]
let keys = {}, out = [];
ar.forEach(({title, sum}) => title in keys ? keys[title].push(sum) : (sum = keys[title]=[sum], out.push({[name] : title, [data] : sum})));
document.write(`<pre>${JSON.stringify(out, "", 1)}</pre>`)
</script>
ureech,
может как-то правильнее сформулировать проблему?
если нужны числа, а не строки добавьте + строка 4
<script>
let ar = [{"sum":"40.00","title":"Еда"},{"sum":"40.00","title":"Еда"},{"sum":"100.00","title":"Акции"},{"sum":"1000.00","title":"Зарплата"},{"sum":"100.00","title":"Акции"}]
let keys = {}, out = [];
ar.forEach(({title: name, sum : data}) => name in keys ? keys[name].push(+data) : (data = keys[name]=[+data], out.push({name, data})));
document.write(`<pre>${JSON.stringify(out, "", 1)}</pre>`)
</script>
ureech,
что не так?
<!DOCTYPE html>
<html>
<head>
<title>Highcharts Tutorial</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
<script language = "JavaScript">
$(document).ready(function() {
var title = {
text: 'Monthly Average Temperature'
};
var subtitle = {
text: 'Source: WorldClimate.com'
};
var xAxis = {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};
var yAxis = {
title: {
text: 'Temperature (\xB0C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: '\xB0C'
}
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var ar = [{"sum":"40.00","title":"Еда"},{"sum":"40.00","title":"Еда"},{"sum":"100.00","title":"Акции"},{"sum":"1000.00","title":"Зарплата"},{"sum":"100.00","title":"Акции"}]
var keys = {}, series = [];
ar.forEach(({title: name, sum : data}) => name in keys ? keys[name].push(+data) : (data = keys[name]=[+data], series.push({name, data})));
var json = {};
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container').highcharts(json);
});
</script>
</body>
</html>
может как-то правильнее сформулировать проблему?
Сори.Упустил).
Завелась,родная). Благодарю. Пойду разбираться).
Приветствую. Нашёл неувязки у себя. Помогите ещё). Суть в том, что нет привязки данных массива series[] и categories[]. Если у меня например в series[
[
{
"name": "Молоко",
"data": [
40,
30,
80,
40,
40
]
},
{
"name": "Бензин",
"data": [
2000,
1500,
2000
]
}
]
А в categories[
"2020-10-06",
"2020-10-21",
"2020-10-31",
"2020-11-02",
"2020-11-03",
"2020-11-04"
]
То и оба графика начинаются с первого числа и их координаты оси Х соответствует датам по порядку, а не тем которые реально им соответствуют. Нужно как то связать это дело. Может есть какие то свойства или методы у данной библиотеки? Но я не разобрался.
Даты из входного массива я получаю так
dte = res.map(x => x.pubdate);
И потом использую в categories
var xAxis = {
categories: dte
};
ureech,
:-? информации недостаточно, либо она слабо локализована.
https://jsfiddle.net/ureech/y89daesL/10/
ureech,
надо читать документацию, а пока как вариант
заменить
res.forEach(({title: name,sum: data}) => name in keys ? keys[name].push(+data) : (data = keys[name] = [+data], series.push({
name, data
})));
на
res.forEach(({title: name,sum: data}) => name in keys || (data = keys[name] = res.map(({title, sum}) => title == name ? +sum : null), series.push({
name, data
})));
Спасибо,что помогаете. Так,координаты верные,но...Гляньте сами).
https://jsfiddle.net/ureech/y89daesL/12/
,но...
надо читать документацию,
что-бы был график, нужно знать в каком формате нужны данные, либо вникать в документацию, либо искать пример. (самостоятельно)
У нас не правильно построен массив series. Сейчас он такой
[
{
"sum": 40,
"title": "Молоко"
},
{
"sum": 40,
"title": "Молоко"
},
{
"sum": 900,
"title": "Бензин"
},
....
]
А нужен такой
[{
name:"Молоко",
data:[40,40,...]
},
{
name: "Бензин",
data:[900,...]
}
]
А нужен такой
он такой и есть.
Да. Не тот вывод посмотрел.
Нашёл на одном форуме.У чела подобное было. Напмсал,что
"В моем конкретном случае причиной этой проблемы был плохой вывод данных. В свойстве "series", в массиве "data" было значение "false".
Пример:
series : {
"type":"column",
"name":"Test",
"data":[541,784,false,251,353]
}
"
У нас null, но суть таже.Нет?
Вроде нашёл нужную опцию.(Боюсь сглазить):)
var plotOptions = {
series: {
connectNulls: true
}
};
Потестю пока)
ureech,
так допишите код выше name, data, connectNulls: true
res.forEach(({title: name,sum: data}) => name in keys || (data = keys[name] = res.map(({title, sum}) => title == name ? +sum : null), series.push({
name, data, connectNulls: true
})));
ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>
</head>
<body>
<div class="col-md-6"><div id = "container-line"></div></div><div id="slider"></div>
<script>
Highcharts.setOptions({
colors: ['#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
res = [
{
"pubdate": "2020-10-29",
"sum": 40,
"title": "Молоко",
"cat_title": "Еда",
"rate": "1.00"
},
{
"pubdate": "2020-10-31",
"sum": 40,
"title": "Молоко",
"cat_title": "Еда",
"rate": "1.00"
},
{
"pubdate": "2020-11-01",
"sum": 900,
"title": "Бензин",
"cat_title": "Авто",
"rate": "1.00"
},
{
"pubdate": "2020-11-02",
"sum": 40,
"title": "Молоко",
"cat_title": "Еда",
"rate": "1.00"
},
{
"pubdate": "2020-11-03",
"sum": 700,
"title": "Бензин",
"cat_title": "Авто",
"rate": "1.00"
},
{
"pubdate": "2020-11-04",
"sum": 40,
"title": "Молоко",
"cat_title": "Еда",
"rate": "1.00"
},
{
"pubdate": "2020-11-06",
"sum": 400,
"title": "Бензин",
"cat_title": "Авто",
"rate": "1.00"
},
{
"pubdate": "2020-11-07",
"sum": 40,
"title": "Молоко",
"cat_title": "Еда",
"rate": "1.00"
}
]
//if(res === null) alert('Нет данных');
dte = res.map(x => x.pubdate);
valute = 'руб';
var chart = {
type:'line'
};
var title = {
style: {
color: '#63a583'
},
text: ''
};
var subtitle = {
style: {
color: '#513e5c',
fontSize: '15px'
},
text: valute + '.'
};
var xAxis = {
categories: dte
};
var yAxis = {
title: {
text: 'Сумма (' + valute + '.)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
};
var tooltip = {
valueSuffix: valute + '.'
};
var legend = {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
};
var keys = {},
series = [];
res.forEach(({title: name,sum: data}) => name in keys || (data = keys[name] = res.map(({title, sum}) => title == name ? +sum : null), series.push({
name, data, connectNulls: true
})));
console.log(dte)
var json = {};
json.chart = chart;
json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;
$('#container-line').highcharts(json);
</script>
</body>
</html>
Да не, я как опцию в общий код вставил.
https://jsfiddle.net/ureech/y89daesL/17/
Пусть по феншую будет)))
Спасибо вам большое. Пойду дальше мудрить).
Привет.Возник вопрос по коду.
res.forEach(
({title: name,sum: data}) => name in keys || (data = keys[name] = res.map(({title, sum}) => title == name ? +sum : ''), series.push({name, data}))
);
В массиве res[] кроме title есть ещё пару ключей,которые я хотел бы использовать вместо title в данном цикле. Можно ли как использовать,скажем,абстра ктную переменную var item вместо title и присваивать ей названия ключей массива,которые я буду передавать в ф-цию? Ну или как то по другому.Не знаю. Думаю суть понятна).
ureech,
var nnn = 'title';
res.forEach(({[nnn] : name,sum: data}) => name in keys || (data = keys[name] = res.map(({[nnn] : vvv, sum}) => vvv == name ? +sum : null), series.push({
name, data, connectNulls: true
})));
Блин, порой кажется,ну вот уловил суть,а потом доходит,что ни хрена)))
Спасибо. А то хотел через if уже делать).
vBulletin® v3.6.7, Copyright ©2000-2025, Jelsoft Enterprises Ltd. Перевод: zCarot