Develop Reference

How to filter arrays with multiple conditions in javascript?

So my example array as follows,
{
"available": [
{
"AC": "false",
"availableSeats": "18",
"avlWindowSeats": "10",
"bookable": "true",
"nonAC": "true",
"seater": "false",
"sleeper": "true",
"zeroCancellationTime": "0",
"mTicketEnabled": "true"
},
{
"AC": "false",
"availableSeats": "18",
"avlWindowSeats": "10",
"bookable": "true",
"nonAC": "true",
"seater": "true",
"sleeper": "true",
"zeroCancellationTime": "0",
"mTicketEnabled": "true"
},
....
]
}
And my filter data as follows,
var filters = {
nonAC: [
"true"
],
seater: [
"true"
],
sleeper: [
"true"
],
};
And i have created a query builder which helps to finalize the query !
buildFilter = (filter) => {
let query = {};
for (let keys in filter) {
if ( (filter[keys].constructor === Object) || (filter[keys].constructor === Array && filter[keys].length > 0)) {
query[keys] = filter[keys];
}
}
return query;
};
And finally my filter function as follows,
filterData = (data, query) => {
const filteredData = data.filter( (item) => {
for (let key in query) {
if (item[key] === undefined || !query[key].includes(item[key])) {
return false;
}
}
return true;
});
return filteredData;
};
If you notice my filter conditions it says
seater: [
"true"
],
sleeper: [
"true"
],
Which obliviously means that if seater and sleeper is true then filter that, but the problem is i need the result as "seater or sleeper" so, if any one is true it should filter that,
So how to change my filter function which accepts as seater or sleeper.
The result should give both the array as result not the second one alone as output !

You coiuld get the entries of filters and filter if one of the filter is true.
const
available = [{ AC: "false", availableSeats: "18", avlWindowSeats: "10", bookable: "true", nonAC: "true", seater: "false", sleeper: "true", zeroCancellationTime: "0", mTicketEnabled: "true" }, { AC: "false", availableSeats: "18", avlWindowSeats: "10", bookable: "true", nonAC: "true", seater: "true", sleeper: "true", zeroCancellationTime: "0", mTicketEnabled: "true" }],
filters = { nonAC: ["true"], seater: ["true"], sleeper: ["true"] },
filterEntries = Object.entries(filters),
result = available.filter(object =>
filterEntries.some(([key, values]) => values.includes(object[key]))
);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

amChart draggable pie chart rendering dummy slide

I am attempting to add a chart from amChart into my php project and everything seems to be going OK, I have two parameters and when I change them, it loads the data into my array.
I am using a new chat, a draggable pie chart and this chart seems to be making use of a "dummy" slide to do percentages and calculations.
The problem is, when my data first loads, it loads this dummy slide which of course throws off my dat and I have to manually drag it out for my chart to be correct.
I have inserted my code below, alot of the code is from the libary and my changes only involve the ajax code used to manipulate the data of the chart.
Grateful for any assistance.
<script>
// Themes begin
am4core.useTheme(am4themes_animated);
// Themes end
var data;
jQuery(document).ready(function () {
// appHandleUniform()
$('.datepicker').datepicker({
rtl: App.isRTL(),
autoclose: true,
weekStart: app_cfg_first_day_of_week,
format: 'yyyy-mm-dd',
clearBtn: true,
});
});
var pData;
var data = [{
"country": "Dummy",
"disabled": true,
"litres": 1000,
"color": am4core.color("#dadada"),
"opacity": 0.3,
"strokeDasharray": "4,4"
} /*{
"country": "Apple",
"litres": 501.9
}, {
"country": "Pest",
"litres": 301.9
}, {
"country": "Ireland",
"litres": 201.1
}, {
"country": "Germany",
"litres": 165.8
}, {
"country": "Australia",
"litres": 139.9
}, {
"country": "Austria",
"litres": 128.3
}*/ ];
// cointainer to hold both charts
var container = am4core.create("chartdiv", am4core.Container);
container.width = am4core.percent(100);
container.height = am4core.percent(100);
container.layout = "horizontal";
container.events.on("maxsizechanged", function () {
chart1.zIndex = 0;
separatorLine.zIndex = 1;
dragText.zIndex = 2;
chart2.zIndex = 3;
})
var chart1 = container.createChild(am4charts.PieChart);
chart1.validateData();
var startDate = endDate = "";
$("#start_date").change(function () {
startDate = $(this).val();
});
$("#end_date").change(function () {
endDate = $(this).val();
if (startDate != "" && endDate != "") {
$.ajax({
type: "POST",
url: '<?php echo url_for("charts/getEntryFormsData") ?>',
data: {startDate: startDate, endDate: endDate},
success: function (data) {
pData = $.parseJSON(data);
// or
//chart1.validateData();
chart1.data = [{
"country": "Dummy",
"disabled": true,
"litres": 1000,
"color": am4core.color("#dadada"),
"opacity": 0.3,
"strokeDasharray": "4,4"
},{
"country": "CTR",
"litres": pData["CTR"].length
}, {
"country": "DRFI",
"litres": pData["DRFI"].length
}, {
"country": "FIUIN",
"litres": pData["FIUIN"].length
}, {
"country": "RFA",
"litres": pData["RFA"].length
}, {
"country": "RFIR",
"litres": pData["RFIR"].length
}, {
"country": "TPR",
"litres": pData["TPR"].length
}];
}
});
} else {
alert("Choose Start Date First");
$("#end_date").val("");
}
});
// chart1.data=data;
chart1 .fontSize = 11;
chart1.hiddenState.properties.opacity = 0; // this makes initial fade in effect
//chart1.data = data;
//chart1.validateData();
chart1.radius = am4core.percent(70);
chart1.innerRadius = am4core.percent(40);
chart1.zIndex = 1;
var series1 = chart1.series.push(new am4charts.PieSeries());
series1.dataFields.value = "litres";
series1.dataFields.category = "country";
series1.colors.step = 2;
series1.alignLabels = false;
series1.labels.template.bent = true;
series1.labels.template.radius = 3;
series1.labels.template.padding(0,0,0,0);
var sliceTemplate1 = series1.slices.template;
sliceTemplate1.cornerRadius = 5;
sliceTemplate1.draggable = true;
sliceTemplate1.inert = true;
sliceTemplate1.propertyFields.fill = "color";
sliceTemplate1.propertyFields.fillOpacity = "opacity";
sliceTemplate1.propertyFields.stroke = "color";
sliceTemplate1.propertyFields.strokeDasharray = "strokeDasharray";
sliceTemplate1.strokeWidth = 1;
sliceTemplate1.strokeOpacity = 1;
var zIndex = 5;
sliceTemplate1.events.on("down", function (event) {
event.target.toFront();
// also put chart to front
var series = event.target.dataItem.component;
series.chart.zIndex = zIndex++;
})
series1.ticks.template.disabled = true;
sliceTemplate1.states.getKey("active").properties.shiftRadius = 0;
sliceTemplate1.events.on("dragstop", function (event) {
handleDragStop(event);
})
// separator line and text
var separatorLine = container.createChild(am4core.Line);
separatorLine.x1 = 0;
separatorLine.y2 = 300;
separatorLine.strokeWidth = 3;
separatorLine.stroke = am4core.color("#dadada");
separatorLine.valign = "middle";
separatorLine.strokeDasharray = "5,5";
var dragText = container.createChild(am4core.Label);
dragText.text = "Drag slices over the line";
dragText.rotation = 90;
dragText.valign = "middle";
dragText.align = "center";
dragText.paddingBottom = 5;
// second chart
var chart2 = container.createChild(am4charts.PieChart);
chart2.hiddenState.properties.opacity = 0; // this makes initial fade in effect
chart2 .fontSize = 11;
chart2.radius = am4core.percent(70);
// or
//chart1.validateData();
chart2.data = [{
"country": "Dummy",
"disabled": true,
"litres": 1000,
"color": am4core.color("#dadada"),
"opacity": 0.3,
"strokeDasharray": "4,4"
}, {
"country": "CTR",
"litres": 4
}, {
"country": "DRFI",
"litres":2
}, {
"country": "FIUIN",
"litres": 5
}, {
"country": "RFA",
"litres": 5
}, {
"country": "RFIR",
"litres":6
}, {
"country": "TPR",
"litres": 6
}];
chart2.validateData();
//chart2.data = data;
chart2.innerRadius = am4core.percent(40);
chart2.zIndex = 1;
var series2 = chart2.series.push(new am4charts.PieSeries());
series2.dataFields.value = "litres";
series2.dataFields.category = "country";
series2.colors.step = 2;
series2.alignLabels = false;
series2.labels.template.bent = true;
series2.labels.template.radius = 3;
series2.labels.template.padding(0,0,0,0);
series2.labels.template.propertyFields.disabled = "disabled";
var sliceTemplate2 = series2.slices.template;
sliceTemplate2.copyFrom(sliceTemplate1);
series2.ticks.template.disabled = true;
function handleDragStop(event) {
var targetSlice = event.target;
var dataItem1;
var dataItem2;
var slice1;
var slice2;
if (series1.slices.indexOf(targetSlice) != -1) {
slice1 = targetSlice;
slice2 = series2.dataItems.getIndex(targetSlice.dataItem.index).slice;
}
else if (series2.slices.indexOf(targetSlice) != -1) {
slice1 = series1.dataItems.getIndex(targetSlice.dataItem.index).slice;
slice2 = targetSlice;
}
dataItem1 = slice1.dataItem;
dataItem2 = slice2.dataItem;
var series1Center = am4core.utils.spritePointToSvg({ x: 0, y: 0 }, series1.slicesContainer);
var series2Center = am4core.utils.spritePointToSvg({ x: 0, y: 0 }, series2.slicesContainer);
var series1CenterConverted = am4core.utils.svgPointToSprite(series1Center, series2.slicesContainer);
var series2CenterConverted = am4core.utils.svgPointToSprite(series2Center, series1.slicesContainer);
// tooltipY and tooltipY are in the middle of the slice, so we use them to avoid extra calculations
var targetSlicePoint = am4core.utils.spritePointToSvg({ x: targetSlice.tooltipX, y: targetSlice.tooltipY }, targetSlice);
if (targetSlice == slice1) {
if (targetSlicePoint.x > container.pixelWidth / 2) {
var value = dataItem1.value;
dataItem1.hide();
var animation = slice1.animate([{ property: "x", to: series2CenterConverted.x }, { property: "y", to: series2CenterConverted.y }], 400);
animation.events.on("animationprogress", function (event) {
slice1.hideTooltip();
})
slice2.x = 0;
slice2.y = 0;
dataItem2.show();
}
else {
slice1.animate([{ property: "x", to: 0 }, { property: "y", to: 0 }], 400);
}
}
if (targetSlice == slice2) {
if (targetSlicePoint.x < container.pixelWidth / 2) {
var value = dataItem2.value;
dataItem2.hide();
var animation = slice2.animate([{ property: "x", to: series1CenterConverted.x }, { property: "y", to: series1CenterConverted.y }], 400);
animation.events.on("animationprogress", function (event) {
slice2.hideTooltip();
})
slice1.x = 0;
slice1.y = 0;
dataItem1.show();
}
else {
slice2.animate([{ property: "x", to: 0 }, { property: "y", to: 0 }], 400);
}
}
toggleDummySlice(series1);
toggleDummySlice(series2);
series1.hideTooltip();
series2.hideTooltip();
}
function toggleDummySlice(series) {
var show = true;
for (var i = 1; i < series.dataItems.length; i++) {
var dataItem = series.dataItems.getIndex(i);
if (dataItem.slice.visible && !dataItem.slice.isHiding) {
show = false;
}
}
var dummySlice = series.dataItems.getIndex(0);
if (show) {
dummySlice.show();
}
else {
dummySlice.hide();
}
}
series2.events.on("datavalidated", function () {
var dummyDataItem = series2.dataItems.getIndex(0);
dummyDataItem.show(0);
dummyDataItem.slice.draggable = false;
dummyDataItem.slice.tooltipText = undefined;
for (var i = 1; i < series2.dataItems.length; i++) {
series2.dataItems.getIndex(i).hide(0);
}
})
series1.events.on("datavalidated", function () {
var dummyDataItem = series1.dataItems.getIndex(0);
dummyDataItem.hide(0);
dummyDataItem.slice.draggable = false;
dummyDataItem.slice.tooltipText = undefined;
})
</script>

How to separate array of objects with specific array prefix in typescript

I planed to prepare this array by separate those kind of array with index specification
Default data format
[{
"Emp_code": "EM-00001",
"Emp_title": "11",
"Emp_firstName": "22",
"Emp_lastName": "33",
"Emp_dateOfBirth": "20-10-1985",
"Con_title": "title",
"Con_email": "email",
"Con_addres": "address",
"Con_phone": "phone"
}]
Wanted format
[{
"emp": {
"code": "EM-00001",
"title": "11",
"firstName": "22",
"lastName": "33",
"dateOfBirth": "20-10-1985",
},
"con": {
"Con_title": "title",
"Con_email": "email",
"Con_addres": "address",
"Con_phone": "phone"
}
}]

You can reduce the property names to a starting accumulator of [{ emp: {} }, { con: {} }] and each iteration you can add the property to the corresponding item in the accumulator.
const data = [{
"Emp_code": "EM-00001",
"Emp_title": "11",
"Emp_firstName": "22",
"Emp_lastName": "33",
"Emp_dateOfBirth": "20-10-1985",
"Con_title": "title",
"Con_email": "email",
"Con_addres": "address",
"Con_phone": "phone"
}];
const format = obj =>
Object.getOwnPropertyNames(obj[0]).reduce(
(acc, prop) => {
if (prop.startsWith('Emp_')) {
acc[0].emp[prop.replace('Emp_', '')] = obj[0][prop];
} else {
acc[1].con[prop] = obj[0][prop];
}
return acc;
},
[{ emp: {} }, { con: {} }]
);
console.log(format(data));

var item = {
"Emp_code": "EM-00001",
"Emp_title": "11",
"Emp_firstName": "22",
"Emp_lastName": "33",
"Emp_dateOfBirth": "20-10-1985",
"Con_title": "title",
"Con_email": "email",
"Con_addres": "address",
"Con_phone": "phone"
}
var data = [item, item];
var res = []
for (var item of data) {
var temp = {};
res.push(temp);
for (var prop in item) {
var parts = prop.split('_');
var prefix = parts[0].toLowerCase();
temp[prefix] = temp[prefix] || {};
temp[prefix][prefix === 'emp' ? parts[1] : prop] = item[prop]
}
}
console.log(res);

Below script checks element using loops, then splits them into prefix & suffix. Then checks for whether prefix is present in resulting array or not. If it's not then adds that prefix into array & prepares the result.
var a = [{"Emp_code": "EM-00001", "Emp_title": "11", "Emp_firstName": "22", "Emp_lastName": "33", "Emp_dateOfBirth": "20-10-1985", "Con_title": "title", "Con_email": "email", "Con_addres": "address", "Con_phone": "phone"}];
var b = [];
$.each(a, function(arrKey, arrData){
var tempArr = {};
$.each(arrData, function(key, value){
var arrKey = key.split('_');
var prefix = arrKey[0];
var suffix = arrKey[1];
if( $.inArray(prefix, Object.keys(tempArr)) == -1 ) {
tempArr[prefix] = {};
}
tempArr[prefix][suffix]=value;
});
b.push(tempArr);
});
console.log(b);

javascript create nested JSON array from array

I have this array :
myArray = [ "Id = 1", "Time = 18:40", "Topic = yyyyyyyyyyyy", "GUEST", "Role = HS", "Infos = Arizona", "Role = GS", "Infos = Arizona", "Role = GS", "Infos = Colorado", "Id = 2","Time = 11:32", "Topic = xoxo", "GUEST", "Role" = "GS", "Infos = California", "Role = CS", "Infos = Maryland", "Role = GS","Infos = Nevada" ];
I want to create a nested JSON array from it:
myJson = [
{
"Id" : "1",
"Time" : "18:40",
"Topic" : "yyyyyyyyyyyy",
"GUEST":
[
{"Role" : "HS",
"Infos" : "Arizona"},
{"Role" : "GS",
"Infos" : "Arizona"},
{"Role" : "HS",
"Infos" : "Colorado"}
]
},
{
"Id" : "2",
"Time" : "11:32",
"Topic" : "xoxo",
"GUEST":
[
{"Role" : "GS",
"Infos" : "California"},
{"Role" : "CS",
"Infos" : "Maryland"},
{"Role" : "GS",
"Infos" : "Nevada"}
]
}
]
How can I do it? tried the code below without success.
myArray = ["Id = 1","Time = 18:40","Topic = yyyyyyyyyyyy","GUEST","Role = HS","Infos = Arizona","Role = GS","Infos = Arizona","Role = GS","Infos = Colorado","Id = 2","Time = 11:32","Topic = xoxo","GUEST","Role" = "GS","Infos = California","Role = CS","Infos = Maryland","Role = GS","Infos = Nevada"];
// Declaring new object
let obj = {};
// Place to remember current level of object
let level;
myJson = [];
for (let item of this.myArray) {
// If it contains an equals
if (item.includes('=')) {
// Split it into two stings
let split = item.split('=');
let key = split[0].trim();
let val = split[1].trim();
// If we're already on a lower level like GUEST3 put it in there
if (level) {
obj[level][key] = val
} else {
// Or just place the new data at the top level
obj[key] = val
}
} else {
// If there's no equals we want to go down a layer
level = item;
myJson.push(obj[item]);
}
}
console.log("myJson : "+ JSON.stringify(myJson));

Another answer is totally right - format you are requesting is totally wrong. If it would have been just going one object deeper when you meet "GUEST" string and create new object in the output when you meet next "Id = \d+" string, you could use something like:
let process = (arr) => {
let path = [];
const data = [];
let o = data;
while (arr && arr.length) {
let item = arr.shift();
let key= null;
let value = null;
if (/Id = \d+/.test(item)) {
o = {};
data.push(o);
let pair = item.split(' = ');
o.Id = pair[1];
}
else if (item == "GUEST") {
o["GUEST"] = {};
o = o["GUEST"]
value = {};
} else {
let pair = item.split(' = ');
o[pair[0]] = pair[1];
}
}
return data;
}
However with this approach your duplicate keys will get overriden like so:
[
{
"Id": "1",
"Time": "18:40",
"Topic": "yyyyyyyyyyyy",
"GUEST": {
"Role": "GS",
"Infos": "Colorado"
}
},
{
"Id": "2",
"Time": "11:32",
"Topic": "xoxo",
"GUEST": {
"Role": "GS",
"Infos": "Nevada"
}
}
]
I think this is a good start and you can fine tune parsing GUEST part up to your liking

JSON's format is wrong.
Key-value pair array is not allowed in JSON.
Key-value pair array cannot have same name key.
Change to the following format (JSON has strict requirements on the format)：
myJson = [
{
"Id" : "1",
"Time" : "18:40",
"Topic" : "yyyyyyyyyyyy",
"GUEST":
[
{
"Role" : "HS",
"Infos" : "Arizona"
},
{
"Role" : "GS",
"Infos" : "Arizona"
},
{
"Role" : "HS",
"Infos" : "Colorado"
}
]
}
]

How to create a javascript array to send data into this json format?

I am new to this so please bear with me.
Please guide me as to how to create a javascript array which in turn gives me a json like this.
{
"MotorInsurance": [{
"Service": "Compare",
"Data": [{
"Apikey": "1234",
"Process": "Compare",
"TransactionId": "32",
"Type": "New",
"Channel": "1"
}],
"Vehicle": [{
"VehicleCode": "456",
"RTOCode": "AP12",
"RegistrationYear": "2016"
}],
"User":[{
"IPAddress": "66",
"DateTime": "12-06-2016"
}]
}]
}
I have tried this :
var formData = {};
formData['MotorInsurance'] = {};
formData['MotorInsurance']['Service'] = "Compare";
formData['MotorInsurance']['Data'] = {};
formData['MotorInsurance']['Data']['Apikey'] = '1234';
formData['MotorInsurance']['Data']['Process'] = 'Compare';
formData['MotorInsurance']['Data']['TransactionId'] = '32';
formData['MotorInsurance']['Data']['Type'] = 'New';
formData['MotorInsurance']['Data']['Channel'] = '1';
formData['MotorInsurance']['Vehicle'] = {};
formData['MotorInsurance']['Vehicle']['VehicleCode'] = '';
formData['MotorInsurance']['Vehicle']['RTOCode'] = '';
formData['MotorInsurance']['Vehicle']['RegistrationYear'] = '';
formData['MotorInsurance']['User'] = {};
formData['MotorInsurance']['User']['IPAddress'] = '66.12.5.4';
formData['MotorInsurance']['User']['DateTime'] = '12-06-2016';
Please guide me. Thanks

var formData = {};
formData['MotorInsurance'] = [{}];
formData['MotorInsurance'][0]['Service'] = "Compare";
formData['MotorInsurance'][0]['Data'] = [{}];
formData['MotorInsurance'][0]['Data'][0]['Apikey'] = '1234';
formData['MotorInsurance'][0]['Data'][0]['Process'] = 'Compare';
formData['MotorInsurance'][0]['Data'][0]['TransactionId'] = '32';
formData['MotorInsurance'][0]['Data'][0]['Type'] = 'New';
formData['MotorInsurance'][0]['Data'][0]['Channel'] = '1';
formData['MotorInsurance'][0]['Vehicle'] = [{}];
formData['MotorInsurance'][0]['Vehicle'][0]['VehicleCode'] = '';
formData['MotorInsurance'][0]['Vehicle'][0]['RTOCode'] = '';
formData['MotorInsurance'][0]['Vehicle'][0]['RegistrationYear'] = '';
formData['MotorInsurance'][0]['User'] = [{}];
formData['MotorInsurance'][0]['User'][0]['IPAddress'] = '66.12.5.4';
formData['MotorInsurance'][0]['User'][0]['DateTime'] = '12-06-2016';
document.write('<pre>' + JSON.stringify(formData, 0, 4) + '</pre>');

Your formData['MotorInsurance'] has to be an array:
formData['MotorInsurance'] = [];
Then you'll be creating everything else in the first element of this array:
formData['MotorInsurance'][0] = {};
formData['MotorInsurance'][0]['Service'] = "Compare";
The same goes for Data, Vehicule and User.

You can approach it like this: for the nested objects, populate them one by one (like the data variable below) and then when assigning to the form data, make sure you put square brackets around the variable.
vehicle = {
"VehicleCode": "456",
"RTOCode": "AP12",
"RegistrationYear": "2016"
};
user = {
"IPAddress": "66",
"DateTime": "12-06-2016"
};
data = {
"Apikey": "1234",
"Process": "Compare",
"TransactionId": "32",
"Type": "New",
"Channel": "1"
};
service = {"Service": "Compare"}
o = {"Data": [data], "Vehicle": [vehicle], "User": [user], "Service": service}
formData["MotorInsurance"] = [o]