Manipulating Data in Vue for Chart Options - javascript

I am hitting a rest api giving me a dataset on a piece of equipment. I need to get the first column of datas as an array and I seem to not get it right. I have tried computed and methods in vue but it always returns []. Does anyone know what I may be doing wrong? {{datas}} prints out my JSON with no issues but when i add {{ getDate }} it returns can't find date of undefined.
Thanks
<template>
<v-app>
<!-- <v-data-table :headers="headers" :items="datas" class="elevation-1">
<template slot="items" scope="props">
<td class="text-xs-right">{{props.item.date}}</td>
<td class="text-xs-right">{{props.item.iron}}</td>
<td class="text-xs-right">{{props.item.chromium}}</td>
<td class="text-xs-right">{{props.item.lead}}</td>
</template>
</v-data-table>-->
<p>{{ datas }}</p>
<!-- <p v-for="data in datas">{{ data.date }}</p> -->
{{ getDates }}
<center>
<chart :options="chartOptionsBar"></chart>
</center>
<chart :options="chartOptionsLine"></chart>
<p>108J View</p>
</v-app>
</template>
<script>
import axios from "axios";
export default {
name: "E108J",
components: {},
data() {
return {
datas: [],
chartDates: [],
chartOptionsLine: {
xAxis: {
data: ["q", "Q2", "Q3", "Q4"]
},
yAxis: {
type: "value"
},
series: [
{
type: "line",
data: [63, 75, 24, 92]
}
],
title: {
text: "Quarterly Sales Results",
x: "center",
textStyle: {
fontSize: 24
}
},
color: ["#127ac2"]
},
chartOptionsBar: {
xAxis: {
data: ["Q1", "Q2", "Q3", "Q4"]
},
yAxis: {
type: "value"
},
series: [
{
type: "bar",
data: [63, 75, 24, 92]
}
],
title: {
text: "Quarterly Sales Results",
x: "center",
textStyle: {
fontSize: 36
}
}
}
};
},
mounted() {
axios
.get("http://localhost:3000/E108J")
.then(response => (this.datas = response.data));
},
computed: {
getDates() {
let chartdates;
for (let i = 0;i< this.datas.length; i++) {
chartdates = this.data[i];
}
return chartdates;
}
}
};
</script>
JSON Data:
[
{
date: "10/18/2018",
iron: "0",
chromium: "0",
lead: "3",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "1",
barioum: "0",
phosphorous: "3",
zinc: "2",
molybden: "1",
tin1: "0",
vandium: "2",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.41",
tan: "0.32",
kfish: "22",
water: "0.0022",
pc0: "455",
pc1: "139",
pc2: "25",
pc3: "11",
pc4: "1",
pc5: "0",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "11/2/2018",
iron: "0",
chromium: "0",
lead: "2",
copper: "0",
tin: "3",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "10",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "7",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "213.56",
tan: "0.19",
kfish: "29",
water: "0.0029",
pc0: "339",
pc1: "39",
pc2: "21",
pc3: "8",
pc4: "0",
pc5: "0",
pciso0: "16",
pciso1: "12",
pciso2: "12"
},
{
date: "11/29/2018",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "0",
silver: "0",
silicon: "2",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "1",
zinc: "1",
molybden: "0",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "217.67",
tan: "0.18",
kfish: "21",
water: "0.0021",
pc0: "921",
pc1: "223",
pc2: "40",
pc3: "18",
pc4: "1",
pc5: "0",
pciso0: "17",
pciso1: "15",
pciso2: "12"
},
{
date: "12/13/2018",
iron: "0",
chromium: "0",
lead: "1",
copper: "0",
tin: "0",
aluminum: "1",
nickel: "0",
silver: "0",
silicon: "0",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "2",
zinc: "0",
molybden: "2",
tin1: "0",
vandium: "0",
w: "1",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "214.46",
tan: "0.26",
kfish: "22",
water: "0.0022",
pc0: "581",
pc1: "101",
pc2: "39",
pc3: "24",
pc4: "7",
pc5: "4",
pciso0: "16",
pciso1: "14",
pciso2: "12"
},
{
date: "1/14/2019",
iron: "0",
chromium: "0",
lead: "0",
copper: "0",
tin: "0",
aluminum: "0",
nickel: "1",
silver: "0",
silicon: "1",
boron: "0",
sodium: "0",
magnesium: "0",
calcium: "0",
barioum: "0",
phosphorous: "4",
zinc: "0",
molybden: "0",
tin1: "0",
vandium: "0",
w: "0",
potassium: "0",
antimony: "0",
lithium: "0",
maganese: "0",
cadmium: "",
visc40: "222.35",
tan: "0.29",
kfish: "13",
water: "0.0013",
pc0: "663",
pc1: "140",
pc2: "13",
pc3: "11",
pc4: "2",
pc5: "0",
pciso0: "17",
pciso1: "14",
pciso2: "11"
}
]


First, to be safe, check that datas exists in your computed property. It is set to an array initially, but if invalid data comes back it could cause an error. So you could check something right inside your computed property like if(this.datas && this.datas.length), and only if that is true try to fill in chartdates. Otherwise, return an empty array.
Second, based on the JSON you included, the date can be extracted in the for loop using
this.datas[i].date
What you have now would get the whole object inside { .. } instead of just the date. There's also a typo using this.data[i] when it should be this.datas[i].
Finally, to make chartdates an array you need to set chartdates[i] to each ith value, otherwise only the last value will be stored in chartdates as Steven pointed out.


Try this:
<div v-if="datas.length > 0">
<p>{{ datas }}</p>
{{ getDates }}
</div>


In this lines of code
getDates() {
let chartdates;
for (let i = 0;i< this.datas.length; i++) {
chartdates = this.data[i];
}
return chartdates;
}
may be this.data[i] is replace by this.datas[i];

Related

How can we easily remove an element from an multi dimensional array object in react js

I am working in react Js. There is a trouble for me to remove an item corresponding to "product_option_value_id" .I need to remove item from product_option_value ( child array object) if my given itemId==product_option_value_id, and return whole array object after removing the specified item. I think the idea is clear . I tried a method , but I got undefined.
"default": 0,
"master_option": 0,
" master_option_value": 0,
"maximum": 0,
"minimum": 0,
"name": "Choose Size",
"option_id": "4",
"product_option_id": "111",
"product_option_value": [{
"ec_product_id": "",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "25ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "267"
},
{
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "25ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "266"
}
]
},
{
"default": 0,
"master_option": 0,
" master_option_value": 0,
"maximum": 0,
"minimum": 0,
"name": "Water",
"option_id": "4",
"product_option_id": "111",
"product_option_value": [{
"ec_product_id": "",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "25ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "700"
},
{
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "50ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "701"
},
{
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "500ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "702"
}, {
" ec_product_id": "22w",
"exclude_others": "0",
"image": "",
"master_option_value": "0",
"name": "500ml",
"option_value_id": "8",
"points": "0",
"product_option_value_id": "703"
}
]
}
]
The method I tried
const removeOption=(itemId:any)=>{
const filteredItems = productOptions.forEach(function(o:any) {
o.product_option_value = o.product_option_value.filter((s:any) => s.product_option_value_id != itemId);
});
}

Well, the forEach method does not return the array, that is why you are getting undefined as result. This method just perform a function for each element:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
So you need to use the .map() method instead:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map
so basically:
const removeOption = (itemId: any) => {
return productOptions.map((o: any) => {
return { ...o, product_option_value: o.product_option_value.filter((s: any) => s.product_option_value_id !== itemId)};
});
}

group data from an array, making sum and add child node

I am trying to summarize a JSON,I have tried several example from Stack Overflow
How to get max of in array of objects
How to make a foreach of an object in javascript?
but none of the tries have been successful.
Sale: [
{
saleID: "2",
timeStamp: "2021-01-08T17:50:28+00:00",
discountPercent: "0",
completed: "true",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-08T17:49:53+00:00",
updateTime: "2021-01-08T17:50:29+00:00",
completeTime: "2021-01-08T17:50:28+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "500",
ticketNumber: "220000000002",
calcDiscount: "0",
calcTotal: "500",
calcSubtotal: "416.67",
calcTaxable: "416.67",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "83.33",
calcTax2: "0",
calcPayments: "500",
total: "500",
totalDue: "500",
displayableTotal: "500",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "83.33"
},
{
saleID: "3",
timeStamp: "2021-01-08T17:53:18+00:00",
discountPercent: "0",
completed: "false",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-08T17:53:18+00:00",
updateTime: "2021-01-08T17:53:18+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "0",
ticketNumber: "220000000003",
calcDiscount: "0",
calcTotal: "0",
calcSubtotal: "0",
calcTaxable: "0",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "0",
calcTax2: "0",
calcPayments: "0",
total: "0",
totalDue: "0",
displayableTotal: "0",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "0"
},
{
saleID: "5",
timeStamp: "2021-01-08T17:54:43+00:00",
discountPercent: "0",
completed: "false",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-08T17:54:43+00:00",
updateTime: "2021-01-08T17:54:43+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "0",
ticketNumber: "220000000005",
calcDiscount: "0",
calcTotal: "0",
calcSubtotal: "0",
calcTaxable: "0",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "0",
calcTax2: "0",
calcPayments: "0",
total: "0",
totalDue: "0",
displayableTotal: "0",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "0"
},
{
saleID: "6",
timeStamp: "2021-01-24T18:49:27+00:00",
discountPercent: "0",
completed: "true",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-24T18:48:30+00:00",
updateTime: "2021-01-24T18:49:28+00:00",
completeTime: "2021-01-24T18:49:27+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "316.69",
ticketNumber: "220000000006",
calcDiscount: "0",
calcTotal: "316.69",
calcSubtotal: "263.91",
calcTaxable: "263.91",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "52.78",
calcTax2: "0",
calcPayments: "316.69",
total: "316.69",
totalDue: "316.69",
displayableTotal: "316.69",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "52.78"
}]
I have tried several ways, the latest one:
const debitSummary = sales.reduce((acc, inv, i) => {
// console.log("inside reduce");
if (i) {
// if (parseFloat(inv.calcTotal>0)){ // invoice
acc = {
//...acc,
ticketNumber: acc.ticketNumber + ',' + inv.ticketNumber,
registerID: inv.registerID > acc.registerID ? inv.registerID : acc.registerID,
calcTotal: parseFloat(acc.calcTotal) + parseFloat(inv.calcTotal),
timeStamp: formatDate(inv.timeStamp) > formatDate(acc.timeStamp) ? formatDate(inv.timeStamp) : formatDate(acc.timeStamp),
}
// }
}
return acc;
},sales[0] );
But impossible to achieve the goal:
sum of calcTotal,
sum of total,
array of saleID,
array of ticketNumber,
with a break by registerID and day of timeStamp:
[{
calcTotal: "500",
registerID: "1",
saleID: {
"2",
"3",
"5"
},
ticketNumber: {
"220000000002",
"220000000003",
"220000000005"
},
timeStamp: "2021-01-08",
total: "500"
},
{
calcTotal: "316.69",
registerID: "1",
saleID: "6",
ticketNumber: {
"220000000006"
},
timeStamp: "2021-01-24",
total: "316.69"
}
]

You could take an object with date part of the timestamp as key and get the values from the object as result.
const
sale = [{ saleID: "2", timeStamp: "2021-01-08T17:50:28+00:00", discountPercent: "0", completed: "true", archived: "false", voided: "false", enablePromotions: "true", isTaxInclusive: "true", createTime: "2021-01-08T17:49:53+00:00", updateTime: "2021-01-08T17:50:29+00:00", completeTime: "2021-01-08T17:50:28+00:00", referenceNumber: "", referenceNumberSource: "", tax1Rate: "0.2", tax2Rate: "0", change: "0", receiptPreference: "printed", displayableSubtotal: "500", ticketNumber: "220000000002", calcDiscount: "0", calcTotal: "500", calcSubtotal: "416.67", calcTaxable: "416.67", calcNonTaxable: "0", calcAvgCost: "0", calcFIFOCost: "0", calcTax1: "83.33", calcTax2: "0", calcPayments: "500", total: "500", totalDue: "500", displayableTotal: "500", balance: "0", customerID: "0", discountID: "0", employeeID: "1", quoteID: "0", registerID: "1", shipToID: "0", shopID: "1", taxCategoryID: "1", taxTotal: "83.33" }, { saleID: "3", timeStamp: "2021-01-08T17:53:18+00:00", discountPercent: "0", completed: "false", archived: "false", voided: "false", enablePromotions: "true", isTaxInclusive: "true", createTime: "2021-01-08T17:53:18+00:00", updateTime: "2021-01-08T17:53:18+00:00", referenceNumber: "", referenceNumberSource: "", tax1Rate: "0.2", tax2Rate: "0", change: "0", receiptPreference: "printed", displayableSubtotal: "0", ticketNumber: "220000000003", calcDiscount: "0", calcTotal: "0", calcSubtotal: "0", calcTaxable: "0", calcNonTaxable: "0", calcAvgCost: "0", calcFIFOCost: "0", calcTax1: "0", calcTax2: "0", calcPayments: "0", total: "0", totalDue: "0", displayableTotal: "0", balance: "0", customerID: "0", discountID: "0", employeeID: "1", quoteID: "0", registerID: "1", shipToID: "0", shopID: "1", taxCategoryID: "1", taxTotal: "0" }, { saleID: "5", timeStamp: "2021-01-08T17:54:43+00:00", discountPercent: "0", completed: "false", archived: "false", voided: "false", enablePromotions: "true", isTaxInclusive: "true", createTime: "2021-01-08T17:54:43+00:00", updateTime: "2021-01-08T17:54:43+00:00", referenceNumber: "", referenceNumberSource: "", tax1Rate: "0.2", tax2Rate: "0", change: "0", receiptPreference: "printed", displayableSubtotal: "0", ticketNumber: "220000000005", calcDiscount: "0", calcTotal: "0", calcSubtotal: "0", calcTaxable: "0", calcNonTaxable: "0", calcAvgCost: "0", calcFIFOCost: "0", calcTax1: "0", calcTax2: "0", calcPayments: "0", total: "0", totalDue: "0", displayableTotal: "0", balance: "0", customerID: "0", discountID: "0", employeeID: "1", quoteID: "0", registerID: "1", shipToID: "0", shopID: "1", taxCategoryID: "1", taxTotal: "0" }, { saleID: "6", timeStamp: "2021-01-24T18:49:27+00:00", discountPercent: "0", completed: "true", archived: "false", voided: "false", enablePromotions: "true", isTaxInclusive: "true", createTime: "2021-01-24T18:48:30+00:00", updateTime: "2021-01-24T18:49:28+00:00", completeTime: "2021-01-24T18:49:27+00:00", referenceNumber: "", referenceNumberSource: "", tax1Rate: "0.2", tax2Rate: "0", change: "0", receiptPreference: "printed", displayableSubtotal: "316.69", ticketNumber: "220000000006", calcDiscount: "0", calcTotal: "316.69", calcSubtotal: "263.91", calcTaxable: "263.91", calcNonTaxable: "0", calcAvgCost: "0", calcFIFOCost: "0", calcTax1: "52.78", calcTax2: "0", calcPayments: "316.69", total: "316.69", totalDue: "316.69", displayableTotal: "316.69", balance: "0", customerID: "0", discountID: "0", employeeID: "1", quoteID: "0", registerID: "1", shipToID: "0", shopID: "1", taxCategoryID: "1", taxTotal: "52.78" }],
result = Object.values(sale.reduce((r, o) => {
const timeStamp = o.timeStamp.slice(0, 10);
r[timeStamp] ??= { timeStamp, registerID: o.registerID, ticketNumber: [], saleID: [], calcTotal: 0, total: 0 };
['calcTotal', 'total'].forEach(k => r[timeStamp][k] += +o[k]);
['saleID', 'ticketNumber'].forEach(k => r[timeStamp][k].push(o[k]));
return r;
}, {}));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

j = [
{
saleID: "2",
timeStamp: "2021-01-08T17:50:28+00:00",
discountPercent: "0",
completed: "true",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-08T17:49:53+00:00",
updateTime: "2021-01-08T17:50:29+00:00",
completeTime: "2021-01-08T17:50:28+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "500",
ticketNumber: "220000000002",
calcDiscount: "0",
calcTotal: "500",
calcSubtotal: "416.67",
calcTaxable: "416.67",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "83.33",
calcTax2: "0",
calcPayments: "500",
total: "500",
totalDue: "500",
displayableTotal: "500",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "83.33"
},
{
saleID: "3",
timeStamp: "2021-01-08T17:53:18+00:00",
discountPercent: "0",
completed: "false",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-08T17:53:18+00:00",
updateTime: "2021-01-08T17:53:18+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "0",
ticketNumber: "220000000003",
calcDiscount: "0",
calcTotal: "0",
calcSubtotal: "0",
calcTaxable: "0",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "0",
calcTax2: "0",
calcPayments: "0",
total: "0",
totalDue: "0",
displayableTotal: "0",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "0"
},
{
saleID: "5",
timeStamp: "2021-01-08T17:54:43+00:00",
discountPercent: "0",
completed: "false",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-08T17:54:43+00:00",
updateTime: "2021-01-08T17:54:43+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "0",
ticketNumber: "220000000005",
calcDiscount: "0",
calcTotal: "0",
calcSubtotal: "0",
calcTaxable: "0",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "0",
calcTax2: "0",
calcPayments: "0",
total: "0",
totalDue: "0",
displayableTotal: "0",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "0"
},
{
saleID: "6",
timeStamp: "2021-01-24T18:49:27+00:00",
discountPercent: "0",
completed: "true",
archived: "false",
voided: "false",
enablePromotions: "true",
isTaxInclusive: "true",
createTime: "2021-01-24T18:48:30+00:00",
updateTime: "2021-01-24T18:49:28+00:00",
completeTime: "2021-01-24T18:49:27+00:00",
referenceNumber: "",
referenceNumberSource: "",
tax1Rate: "0.2",
tax2Rate: "0",
change: "0",
receiptPreference: "printed",
displayableSubtotal: "316.69",
ticketNumber: "220000000006",
calcDiscount: "0",
calcTotal: "316.69",
calcSubtotal: "263.91",
calcTaxable: "263.91",
calcNonTaxable: "0",
calcAvgCost: "0",
calcFIFOCost: "0",
calcTax1: "52.78",
calcTax2: "0",
calcPayments: "316.69",
total: "316.69",
totalDue: "316.69",
displayableTotal: "316.69",
balance: "0",
customerID: "0",
discountID: "0",
employeeID: "1",
quoteID: "0",
registerID: "1",
shipToID: "0",
shopID: "1",
taxCategoryID: "1",
taxTotal: "52.78"
}];
result = j.reduce((r, { registerID,timeStamp, ...object }) => {
var temp = r.find(o => o.registerID === registerID && (new Date(o.timeStamp)).toLocaleDateString() === (new Date(timeStamp)).toLocaleDateString());
if (!temp) r.push(temp = { calcTotal: "0", registerID,timeStamp: (new Date(timeStamp)).toLocaleDateString(), saleID: [], ticketNumber: [], total: "0" });
temp.saleID.push(object.saleID);
temp.ticketNumber.push(object.ticketNumber);
temp.calcTotal = (parseInt(temp.calcTotal) + parseInt(object.calcTotal)).toString();
temp.total = (parseInt(temp.total) + parseInt(object.total)).toString();
return r;
}, []);
console.log(result);

How to find out similar objects in array - react js

I have seen similar questions about duplicate objects.
my json output:
{ "coupons": [
{
"id": "376363",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b249a0cc5",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "195_2484C1_9873(7531)",
"coupon_code_user": "7531",
"coupon_code_partner": "195_2484C1_9873",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title1",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "376362",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b24997103",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "194_2484C1_9779(4478)",
"coupon_code_user": "4478",
"coupon_code_partner": "194_2484C1_9779",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title2",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341459",
"price": "27000",
"date": "2017-03-07 10:42:47",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5d6fd7214",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19457",
"coupon_parent": "19457",
"coupon_code": "7_1310B1_2389(3386)",
"coupon_code_user": "3386",
"coupon_code_partner": "7_1310B1_2389",
"shop_id": "1310",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-01-16 05:05:05",
"cradit_end_date": "2017-03-19 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "B",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5d6fd71c6",
"coupon_property_id": "0",
"title": "title3",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341456",
"price": "11250",
"date": "2017-03-07 10:34:54",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5b964bf1d",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19724",
"coupon_parent": "19724",
"coupon_code": "16_2129A1_2178(4663)",
"coupon_code_user": "4663",
"coupon_code_partner": "16_2129A1_2178",
"shop_id": "2129",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-03-05 05:05:05",
"cradit_end_date": "2017-05-05 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "A",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5b964b1a1",
"coupon_property_id": "0",
"title": "title4",
"coupon_property_title": "",
"parent_title": ""
}
]
}
each object has a buy_id field. buy_id shows that the objects are the same and I should print them inside one row of html table.
for example the first object and the second object are the same depending on buy_id I print them inside row. output:
---------
title1 - title2 //because the first object and second object have same `buy_id`
---------
title3
---------
title4
should I use two maps?
I should use this scenario inside return of render function.

I put a bet on reduce for that.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
the following snippets will group your objects by buy_id, then you can render them easily
const data = { "coupons": [
{
"id": "376363",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b249a0cc5",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "195_2484C1_9873(7531)",
"coupon_code_user": "7531",
"coupon_code_partner": "195_2484C1_9873",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title1",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "376362",
"price": "14400",
"date": "2018-04-08 10:40:17",
"user_id": "16433",
"ip": "46.225.123.235",
"code": "5ac9b24997103",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "20821",
"coupon_parent": "20821",
"coupon_code": "194_2484C1_9779(4478)",
"coupon_code_user": "4478",
"coupon_code_partner": "194_2484C1_9779",
"shop_id": "2484",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2018-03-24 05:05:05",
"cradit_end_date": "2018-04-22 05:05:05",
"expired": "0",
"pay_data": null,
"seri": "C",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "5ac9b249970c2",
"coupon_property_id": "0",
"title": "title2",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341459",
"price": "27000",
"date": "2017-03-07 10:42:47",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5d6fd7214",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19457",
"coupon_parent": "19457",
"coupon_code": "7_1310B1_2389(3386)",
"coupon_code_user": "3386",
"coupon_code_partner": "7_1310B1_2389",
"shop_id": "1310",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-01-16 05:05:05",
"cradit_end_date": "2017-03-19 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "B",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5d6fd71c6",
"coupon_property_id": "0",
"title": "title3",
"coupon_property_title": "",
"parent_title": ""
},
{
"id": "341456",
"price": "11250",
"date": "2017-03-07 10:34:54",
"user_id": "16433",
"ip": "46.225.76.21",
"code": "58be5b964bf1d",
"succ": "1",
"admin_seen": "1",
"user_seen": "0",
"coupon_id": "19724",
"coupon_parent": "19724",
"coupon_code": "16_2129A1_2178(4663)",
"coupon_code_user": "4663",
"coupon_code_partner": "16_2129A1_2178",
"shop_id": "2129",
"payment_type": "7",
"merchent_type": "3",
"merchent_id": "0",
"cradit_start_date": "2017-03-05 05:05:05",
"cradit_end_date": "2017-05-05 05:05:05",
"expired": "11",
"pay_data": null,
"seri": "A",
"to_friend": "0",
"finance_id": "0",
"app": "web",
"expire_date": "0000-00-00 00:00:00",
"expire_app": "",
"buy_id": "58be5b964b1a1",
"coupon_property_id": "0",
"title": "title4",
"coupon_property_title": "",
"parent_title": ""
}
]
};
const reducedData = data.coupons.reduce((accumulator, value) => {
accumulator[value.buy_id] = accumulator[value.buy_id] || [];
accumulator[value.buy_id].push(value);
return accumulator;
}, {});
console.log(reducedData);

You have to use reduce :
data.coupons.reduce((acc,value)=>{
return acc[value.buy_id] === undefined
? {...acc,[value.buy_id]:value.title}
: {...acc,[value.buy_id]:`${acc[value.buy_id]} - ${value.title}`}
},{})
The result is :
{
"5ac9b249970c2": "title1 - title2",
"58be5d6fd71c6": "title3",
"58be5b964b1a1": "title4"
}

Load JSON to Highchart Series

I'm trying render a column chart using json for xAxis categories and the series. Unfortunately no column chart been generated as shown in picture below.
Here is my JSON structure (already validate using JSON validator online)
{
"Graph": {
"Series": [
{
"name": "John",
"data": [
"51",
"84",
"61",
"45",
"51",
"0",
"0",
"53",
"83",
"50",
"41",
"45",
"0",
"0",
"0",
"40",
"52",
"60",
"48",
"0",
"0",
"60",
"0",
"67",
"58",
"0",
"0",
"0",
"0",
"0"
]
},
{
"name": "Doe",
"data": [
"1",
"0",
"0",
"1",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"1",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0",
"0"
]
}
],
"Categories": [
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"10",
"11",
"12",
"13",
"14",
"15",
"16",
"17",
"18",
"19",
"20",
"21",
"22",
"23",
"24",
"25",
"26",
"27",
"28",
"29",
"30"
]
}
}
Here is my javascript
var dchart = {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: []
},
yAxis: {
min: 0,
title: {
text: 'Applicants'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
groupPadding: 0.1,
pointPadding:0.1,
events: {
legendItemClick: function () {
return false;
}
}
},
series: {
dataLabels:{
enabled:true,
formatter: function() {
if(this.y>0){
return '<div style="text-align:center; font-family:Arial,Helvetica,sans-serif; font-weight:bold;">' + this.y + '</div>';
}
}
}
}
},
series: []
}
$.getJSON("<%=request.getContextPath()%>/c/MonthlyGraphAjax?method=ApplicantByDaily", function(data){
/*xAxis categories*/
for(var x=0;x<data.Graph.Categories.length;x++){
dchart.xAxis.categories.push(data.Graph.Categories[x])
}
/*series*/
for(var z=0;z<data.Graph.Series.length;z++){
dchart.series.push(data.Graph.Series[z])
}
$("#columnGraphContainer").highcharts(dchart)
})
Can anyone help me solved this problem? I think the below code causing the problem
/*series*/
for(var z=0;z<data.Graph.Series.length;z++){
dchart.series.push(data.Graph.Series[z])
}
Sorry for the inconvinience, here is the jsfiddle link for clear view of my problem. Highchart With No Column Bar

HighCharts was expecting numeric values for the data series, but received strings instead and didn't know how to display those on the graph. If you change your input from type String to type Number, it will fix your problem.
"Series": [
{
"name": "John",
"data": [
51,
84,
61,
...
]
}
]
I've forked your fiddle here with a working solution: http://jsfiddle.net/autoboxer/s8symkdz/.
Cheers,
autoboxer

FusionCharts 3.3.1 - escape label and tooltip

I have FusionCharts 3.3.1-sr2.19840 . How do I escape tooltips for html code? If I have an <input> in tooltip or even a <script> with some alert in it, it will trigger my JavaScript code... this is a huge problem. Is there a property to escape tooltips and labels?
Here is a print screen with the tooltip unescaped:

You should use the "& lt;" and "& gt;" to escape the tag. I have created a fiddle to solve the problem.
http://jsfiddle.net/subramaniashiva/4jgfeejx/
FusionCharts.ready(function () {
var ageGroupChart = new FusionCharts({
type: 'pie3d',
renderAt: 'chart-container',
width: '450',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Split of Visitors by Age Group",
"subCaption": "Last year",
"paletteColors": "#0075c2,#1aaf5d,#f2c500,#f45b00,#8e0000",
"bgColor": "#ffffff",
"showBorder": "0",
"use3DLighting": "0",
"showShadow": "0",
"enableSmartLabels": "0",
"startingAngle": "0",
"showPercentValues": "1",
"showPercentInTooltip": "0",
"decimals": "1",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
"showHoverEffect": "1",
"showLegend": "1",
"legendBgColor": "#ffffff",
"legendBorderAlpha": '0',
"legendShadow": '0',
"legendItemFontSize": '10',
"legendItemFontColor": '#666666'
},
"data": [{
"label": "Teenage",
"value": "1250400",
"tooltext": "<input type=\"text\"> Teenage"
}, {
"label": "Adult",
"value": "1463300",
"tooltext": "<input type=\"text\"> Adult"
}, {
"label": "Mid-age",
"value": "1050700",
"tooltext": "<input type=\"text\"> Mid-age"
}, {
"label": "Senior",
"value": "491000",
"tooltext": "<input type=\"text\"> Senior"
}]
}
}).render();
});

Categories

Resources