Related
My JSON file has the dates separated like this:
"time": {
"date": {
"year": 2018,
"month": 2,
"day": 25
},
"time": {
"hour": 10,
"minute": 19,
"second": 6,
"nano": 19000000
}
},
The tutorial I used to get a line graph in d3 going was in this link:
https://datawanderings.com/2019/10/28/tutorial-making-a-line-chart-in-d3-js-v-5/
Using the code below:-
const timeConv = d3.timeParse("%d-%b-%Y");
const dataset = d3.csv(datacsv);
dataset.then(function(data) {
var slices = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d){
return {
date: timeConv(d.date),
measurement: +d[id]
};
})
};
});
});
How could I use the same code but use the JSON file with the separated date values?
Just make up the actual date string from the separate dates:
return {
date: timeConv(d.time.date.day + '-' + d.time.date.month + '-' + d.time.date.year),
measurement: +d[id]
};
Since the month is not described as the abbreviated month name, you need to change timeConv as
const timeConv = d3.timeParse("%d-%m-%Y");
An json data example:
let dataset = [{
"id": 1,
"time": {
"date": {
"year": 2018,
"month": 2,
"day": 25
},
"time": {
"hour": 10,
"minute": 19,
"second": 6,
"nano": 19000000
}
}
}, {
"id": 2,
"time": {
"date": {
"year": 2019,
"month": 2,
"day": 25
},
"time": {
"hour": 10,
"minute": 19,
"second": 6,
"nano": 19000000
}
}
}]
const timeConv = d3.timeParse("%d-%m-%Y");
newData = dataset.map(function(d) {
return {
date: timeConv(d.time.date.day + '-' + d.time.date.month + '-' + d.time.date.year),
measurement: +d.id
}
})
console.log(newData)
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
I have parsed a csv file which gives me an array like this:
[{
"year": 2019,
"month": 6,
"day": 25,
"hour": 4,
"minute": 0,
"temperature": 26.52
},
{
"year": 2019,
"month": 6,
"day": 25,
"hour": 4,
"minute": 0,
"temperature": 26.52
}]
I want to merge minute,hour,day,month,year to a single key. Like this:
"time": "2019-07-02 09:57:35"
so i can use this as a datetime object on my API.
The way I am currently getting data is:
const cleanKeys = [
'year',
'month',
'day',
'hour',
'minute',
'temperature',
];
const dataAsObject = totalData.map(function (values) {
return cleanKeys.reduce(function (o, k, i) {
o[k] = values[i];
return o;
}, {})
});
This is basically adding a header key to all data. I am only interested in merging minute, hour, day, month, year column.
I suggest you to use built in Date constructor:
var obj = {"year": 2019,
"month": 6,
"day": 25,
"hour": 4,
"minute": 0,
"temperature": 26.52};
const date = new Date(obj.year, obj.month - 1, obj.day, obj.hour, obj.minute);
const newObj = {date, temperature: obj.temperature};
console.log(JSON.stringify(newObj));
EDIT:
please find below updated answer using date in loop:
const arr = [{
"year": 2019,
"month": 6,
"day": 25,
"hour": 4,
"minute": 0,
"temperature": 26.52
},
{
"year": 2019,
"month": 6,
"day": 25,
"hour": 4,
"minute": 0,
"temperature": 26.52
}];
const newArr = arr.reduce((a,c) => {
const date = new Date(c.year, c.month - 1, c.day, c.hour, c.minute);
a.push({date, temperature: c.temperature});
return a;
}, []);
console.log(JSON.stringify(newArr));
You can create the string yourself, e.g.:
yourArray["time"] = `${yourArray.year}-${yourArray.month}-${yourArray.day} ${yourArray.hours}:${yourArray.minutes}:${yourArray.seconds}`;
I have an JSON like this
"result": [{
"channel": "A",
"mkp": "ABC",
"qtd": 6,
"total": 2938.2,
"data": "2019-02-16",
"time": "22:30:40"
}, {
"channel": "C",
"mkp": "DEF",
"qtd": 1545,
"total": 2127229.64,
"data": "2019-02-20",
"time": "17:19:49"
}, {
"channel": "C",
"mkp": "JKL",
"qtd": 976,
"total": 1307328.37,
"data": "2019-02-20",
"time": "17:19:53"
}, {
"channel": "U",
"mkp": "PQR",
"qtd": 77,
"total": 98789.87,
"data": "2019-02-20",
"time": "16:12:31"
}, {
"channel": "U",
"mkp": "STU",
"qtd": 427,
"total": 433206.62,
"data": "2019-02-20",
"time": "17:04:27"
}
]
I need to sum the QTD, the total and return the newest data + time when the channel is the same (eg.: Channel C and U have 2 entries), if it's not so I only will display the values, but I can't figure it out how could I iterate and do these math. Someone could help?
A sample of what I want:
"A": [{
"qtd": 6,
"total": 2938.20,
"dateTime": 2019 - 02 - 16 22: 30: 40 "
}],
"C": [{
"qtd": 2.521,
"total": 3434558.01,
"dateTime": 2019 - 02 - 20 17: 19: 53 "
}],
"U": [{
"qtd": 504,
"total": 531996,
49,
"dateTime": 2019 - 02 - 20 17: 04: 27 "
}]
Currently I separated the values using filter like this:
this.channelA = this.receivedJson.filter(({ channel }) => channel === "A");
You could use reduce method and return one object with object as values.
const data = [{"channel":"A","mkp":"ABC","qtd":6,"total":2938.2,"data":"2019-02-16","time":"22:30:40"},{"channel":"C","mkp":"DEF","qtd":1545,"total":2127229.64,"data":"2019-02-20","time":"17:19:49"},{"channel":"C","mkp":"JKL","qtd":976,"total":1307328.37,"data":"2019-02-20","time":"17:19:53"},{"channel":"U","mkp":"PQR","qtd":77,"total":98789.87,"data":"2019-02-20","time":"16:12:31"},{"channel":"U","mkp":"STU","qtd":427,"total":433206.62,"data":"2019-02-20","time":"17:04:27"}]
const res = data.reduce((r, {channel, qtd, total, data, time}) => {
const dateTime = `${data} ${time}`
if(!r[channel]) r[channel] = {qtd, total, dateTime}
else {
r[channel].total += total
r[channel].qtd += qtd;
r[channel].dateTime = dateTime
}
return r;
}, {})
console.log(res)
You an use reduce to group the values based on channel like this:
const input = [{"channel":"A","mkp":"ABC","qtd":6,"total":2938.2,"data":"2019-02-16","time":"22:30:40"},{"channel":"C","mkp":"DEF","qtd":1545,"total":2127229.64,"data":"2019-02-20","time":"17:19:49"},{"channel":"C","mkp":"JKL","qtd":976,"total":1307328.37,"data":"2019-02-20","time":"17:19:53"},{"channel":"U","mkp":"PQR","qtd":77,"total":98789.87,"data":"2019-02-20","time":"16:12:31"},{"channel":"U","mkp":"STU","qtd":427,"total":433206.62,"data":"2019-02-20","time":"17:04:27"}]
const merged = input.reduce((acc, { channel, qtd, total, data, time }) => {
acc[channel] = acc[channel] || [{ qtd: 0, total: 0, dateTime:'' }];
const group = acc[channel][0];
group.qtd += qtd;
group.total += total;
const dateTime = `${data} ${time}`
if(dateTime > group.dateTime)
group.dateTime = dateTime;
return acc;
}, {})
console.log(merged)
I have following output. it gives my API.
{
"_id": {
"year": 2018,
"month": 6,
"day": 11,
"hour": 12,
"interval": 45,
"method": "200"
},
"count": 1
},
{
"_id": {
"year": 2016,
"month": 11,
"day": 11,
"hour": 16,
"interval": 50,
"method": "404"
},
"count": 5
},
{
"_id": {
"year": 2016,
"month": 11,
"day": 11,
"hour": 17,
"interval": 10,
"method": "200"
},
"count": 47
}}
I want to Push them to arrays according to method. As an example
twoHundArray=[
{ "x":2018,6,11,12,45,
"y" :1},
{"x": 2016,11,11,17,10 ,
"y" :47}]
fourhundrArry=[{ "x":2018,11,11,16,50,
"y" :5}]
without using if/else statement how to push them to different arrays. In here I don't know all the names of methods.so cannot use if statement for "method".that is the problem here.
The original object is invalid. You can't have elements in an object without specifying the keys. I've assumed that it is an array.
Secondly, there is no way of pushing elements to different arrays without knowing their names. So the judgement of pushing the elements to different variables will have to be based on if/else conditions. Additionally, creation of those variables will vary based on the groups, as method could have been any value.
If you agree to group the objects based on the values method have, here is a way to do this:
const data = [{"_id":{"year":2018,"month":6,"day":11,"hour":12,"interval":45,"method":"200"},"count":1},{"_id":{"year":2016,"month":11,"day":11,"hour":16,"interval":50,"method":"404"},"count":5},{"_id":{"year":2016,"month":11,"day":11,"hour":17,"interval":10,"method":"200"},"count":47}];
const res = {};
data.forEach(item => {
const { method, ...obj } = item['_id'];
res[method] = res[method] || [];
res[method].push({
x: Object.values(obj),
y: item.count
});
});
console.log(res);
It creates an object, whose keys are method. The values in the object are the arrays, which contain the items grouped by method.
You can use Array.reduce and create a map based on method. Try the following:
var data = [{
"_id": {
"year": 2018,
"month": 6,
"day": 11,
"hour": 12,
"interval": 45,
"method": "200"
},
"count": 1
},
{
"_id": {
"year": 2016,
"month": 11,
"day": 11,
"hour": 16,
"interval": 50,
"method": "404"
},
"count": 5
},
{
"_id": {
"year": 2016,
"month": 11,
"day": 11,
"hour": 17,
"interval": 10,
"method": "200"
},
"count": 47
}];
var method = data.reduce((a,o)=>{
if(!a[o._id.method]){
a[o._id.method] = [];
};
var { method, ...ob } = o._id;
a[o._id.method].push({
"x": Object.values(ob).join(","),
"y" : o.count
});
return a;
}, {});
console.log(method);
You can create an object with status:values key/pair using Array.reduce and post that using Object destructuring and default assignment, create independent variables.
const arr = [{"_id":{"year":2018,"month":6,"day":11,"hour":12,"interval":45,"method":"200"},"count":1},{"_id":{"year":2016,"month":11,"day":11,"hour":16,"interval":50,"method":"404"},"count":5},{"_id":{"year":2016,"month":11,"day":11,"hour":17,"interval":10,"method":"200"},"count":47}];
let obj = arr.reduce((a,c) => {
a[c._id.method] = a[c._id.method] || [];
a[c._id.method].push({"x" : Object.values(c._id).join(), "y" : c.count});
return a;
},{});
/* You can add an entry here for every status type, it will pick the
** value from object and if not present will be defaulted to an empty array */
const {200 : twoHundArray=[], 404 : fourHundArray=[], 300 : threeHundArray=[]} = obj;
console.log(twoHundArray);
console.log(fourHundArray);
console.log(threeHundArray);
#Palani, I'll suggest you to use an object to gather all the required information.
Please have a look at the below code and let me know any suggestions/modifications if you need.
var timeDataArr = [
{
"_id": {
"year": 2018,
"month": 6,
"day": 11,
"hour": 12,
"interval": 45,
"method": "200"
},
"count": 1
},
{
"_id": {
"year": 2016,
"month": 11,
"day": 11,
"hour": 16,
"interval": 50,
"method": "404"
},
"count": 5
},
{
"_id": {
"year": 2016,
"month": 11,
"day": 11,
"hour": 17,
"interval": 10,
"method": "200"
},
"count": 47
}
]
// An object that maps 'method' to its related data array
var newTimeData = {}
for(var timeData of timeDataArr) {
var obj = timeData["_id"];
var arr = [obj["year"], obj["month"], obj["day"], obj["hour"], obj["interval"]];
var newObj = {
"x": arr.join(", "),
"y": timeData["count"],
}
if(newTimeData[obj["method"] + "Array"]) { // method found
newTimeData[obj["method"] + "Array"].push(newObj)
} else { // method not found
newTimeData[obj["method"] + "Array"] = [newObj]
}
}
// PRETTY PRINTING OBJECT
console.log(JSON.stringify(newTimeData, undefined, 4))
/*...
{
"200Array": [
{
"x": "2018, 6, 11, 12, 45",
"y": 1
},
{
"x": "2016, 11, 11, 17, 10",
"y": 47
}
],
"404Array": [
{
"x": "2016, 11, 11, 16, 50",
"y": 5
}
]
}
...*/
// PRETTY PRINTING ARRAY POINTED BY '200Array' key
console.log(JSON.stringify(newTimeData["200Array"], undefined, 4))
/*...
[
{
"x": "2018, 6, 11, 12, 45",
"y": 1
},
{
"x": "2016, 11, 11, 17, 10",
"y": 47
}
]
...*/
// PRETTY PRINTING ARRAY POINTED BY '404Array' key
console.log(JSON.stringify(newTimeData["404Array"], undefined, 4))
/*...
[
{
"x": "2016, 11, 11, 16, 50",
"y": 5
}
]
...*/
Output ยป
H:\RishikeshAgrawani\Projects\Sof\FilterArrays>node FilterArrays.js
{
"200Array": [
{
"x": "2018, 6, 11, 12, 45",
"y": 1
},
{
"x": "2016, 11, 11, 17, 10",
"y": 47
}
],
"404Array": [
{
"x": "2016, 11, 11, 16, 50",
"y": 5
}
]
}
[
{
"x": "2018, 6, 11, 12, 45",
"y": 1
},
{
"x": "2016, 11, 11, 17, 10",
"y": 47
}
]
[
{
"x": "2016, 11, 11, 16, 50",
"y": 5
}
]
This is my code:
var deliveries = [
{
"id": 1,
"destination": 'Oakland',
"orderPrice": 75,
"rushDelivery": true,
"rushDeliveryFee": 12.75,
"orderDate": "4 April 2016"
},
{
"id": 2,
"destination": 'San Jose',
"orderPrice": 62.75,
"orderDate": "5 April 2016"
},
{
"id": 3,
"destination": 'San Francisco',
"orderPrice": 15.00,
"rushDelivery": true,
"rushDeliveryFee": 50.75,
"orderDate": "10 April 2016"
},
{
"id": 4,
"destination": 'San Francisco',
"orderPrice": 25,
"orderDate": "4/11/2016"
},
{
"id": 5,
"destination": 'San Francisco',
"orderPrice": 90,
"rushDelivery": true,
"rushDeliveryFee": 30,
"orderDate": "April 12, 2015"
},
{
"id": 6,
"destination": 'Berkeley',
"orderPrice": 45,
"orderDate": "4/01/2015"
},
{
"id": 7,
"destination": 'Berkeley',
"orderPrice": 62.16,
"orderDate": "12 April 2016"
}
];
var orderPrices = deliveries.reduce(function(prev, current) {
return prev.orderPrice + current.orderPrice
})
console.log(orderPrices);
When I console.log prev.orderPrice in the first iteration of reduce() it prints undefined, but from what I understand, if you give no second argument(the initialValue) to reduce(), it simply defaults to the first element of the array to which you apply the function to. I would expect the first object of the array to be printed. In fact, if we try this with another simpler array like var arr = [1,2,3,4,5], prev prints 1 in the first iteration.
Why is this happening?
The elements in array are reduced 1 by 1 from left to right. Thus, from the second iteration, the prev argument is the current total value already:
var orderPrices = deliveries.reduce(function (prev, current) {
if (prev.orderPrice)
{
return prev.orderPrice + current.orderPrice;
}
return prev + current.orderPrice;
});
console.log(orderPrices);