We Keep Coding

Nested Array Iteration for array of objects find all values search filter

Issue Unable to return testcaseid from array to this.filteredArray
able to return header value and all values of array if search word is empty.
help me on this.
help how to iterate testcaseid and header on search input filed.
Array -
PanelList$: any[] =
[
{
"header":"header1",
"data":[
{
"testcaseId":"tz_param",
"description":"tz_param"
},
{
"testcaseId":"tzication",
"description":"tzication"
}
]
},
{
"header":"security",
"data":[
{
"testcaseId":"tz_prompt",
"description":"tz_prompt"
},
{
"testcaseId":"z_Root_CA",
"description":"z_Root_CA"
},
{
"testcaseId":"tz_part1",
"description":"tz_part1"
}
]
}
]
input search code -
<input matInput (keyup)="applyFilter($event.target.value);" autocomplete="off" placeholder="Search Test Cases...">
Filter Function - to search header and testcase id
applyFilter(filterWord) {
let arraycase;
let arraycase1;
const word = filterWord.toString().toLowerCase();
this.filteredArray = this.PanelList$.filter(his => {
if(his.header.toString().toLowerCase() === word) {
console.log('1' + 'header')
return his}
if(his.header.toString().toLowerCase().includes(word)) {
console.log('2' + 'return full array')
return his}
his.data.filter(ids => {
if(ids.testcaseId.toString().toLowerCase() === word) {
console.log('3')
arraycase = [{header: his.header, data: [ids] }]
console.log(arraycase);
return arraycase
} {
return arraycase
}
})
console.log(arraycase1 + 'asdads');
})
Update 1 -
this.PanelList$ = JSON.parse(msg.data);
this.filteredArray = JSON.parse(msg.data);
both this.PanelList$ and this.filteredArray has same array

Final Answer to my question - i am returning the value as i am expected -
applyFilter(filterWord) {
console.log(this.PanelList$);
let arraycase;
const word = filterWord.toString().toLowerCase();
this.filteredArray = this.PanelList$.map((his) => {
if (his.header.toString().toLowerCase() === word) {
return his;
}
if (his.header.toString().toLowerCase().includes(word)) {
return his;
}
arraycase = [];
his.data.filter((ids) => {
if (ids.testcaseId.toString().toLowerCase() === word) {
arraycase = { header: his.header, data: [ids] };
console.log(arraycase);
return arraycase;
}
});
return arraycase;
});
if (this.filteredArray[0].length === 0) {
this.testCaseIdTable = true;
}
}

Since I do not have all of your code I just added some required modifications so that I can test and you can have an idea how to modify your code.
//applyFilter(filterWord) {
let arraycase;
let arraycase1;
PanelList =
[
{
"header":"TestBootNotification_CS",
"data":[
{
"testcaseId":"tc_real_module_param",
"description":"tc_real_module_param"
},
{
"testcaseId":"tc_BootNotification",
"description":"tc_BootNotification"
}
]
},
{
"header":"security",
"data":[
{
"testcaseId":"tc_with_prompt",
"description":"tc_with_prompt"
},
{
"testcaseId":"tc_install_Root_CA",
"description":"tc_install_Root_CA"
},
{
"testcaseId":"tc_install_client_cert_part1",
"description":"tc_install_client_cert_part1"
}
]
}
]
var word = "TestBootNotification_CS".toString().toLowerCase(); //filterWord.toString().toLowerCase();
this.filteredArray =
PanelList.map(
(his) => {
if(his.header.toString().toLowerCase() === word) {
console.log('1' + 'header')
return his}
if(his.header.toString().toLowerCase().includes(word)) {
console.log('2' + 'return full array')
return his}
arraycase = []
his.data.filter(ids => {
if(ids.testcaseId.toString().toLowerCase() === word) {
console.log('3')
// arraycase = [{header: his.header, data: [ids] }]
var obj = {header: his.header, data: [ids] }
arraycase.push( obj )
console.log(arraycase);
return arraycase
} else {
return arraycase
}
})
console.log(arraycase1 + 'asdads')
}
)
console.log( this.filteredArray )

Show only the information of this date

I have 4 dates of 4 people,I want to bring the name of the person who added that date but when I select the day the array is traversed 4 times and in one of them it brings the name.. that is to say the array travels all the people but not only the one I want.
for example on day 17 when I select it 2 alerts come out with error the third with the name of the person and the fourth alert error.. the others are similar
View picture
The code is this,the function of interest is infoDay
constructor(props) {
super(props);
this.state = {
selected: "",
usuarios: [],
};
}
componentDidMount() {
firebase
.database()
.ref("DatosCli/")
.on("child_added", (data) => {
var datos = data.val();
/* alert(JSON.stringify(datos)); */
var usuariosTemp = this.state.usuarios;
datos.key = data.key;
//Alert.alert("prueba",""+datos.longitud)
usuariosTemp.push(datos);
this.setState({ usuarios: usuariosTemp });
});
}
cargarDatos = async () => {
var userTemp = new Array();
var data = await firebase.database().ref("/DatosCli").once("value");
data.forEach((child) => {
var user = child.val();
user.key = child.key;
userTemp.push(user);
});
this.setState({ usuarios: userTemp });
};
render() {
const markedDates = {};
this.state.usuarios.forEach((usuarioTemp) => {
markedDates[usuarioTemp.date] = {
selected: true,
disableTouchEvent: false,
selectedColor: "orange",
selectedTextColor: "red",
};
});
const infoDay = (day) => {
this.state.usuarios.forEach((usuarioTemp) => {
if (day.dateString == usuarioTemp.date) {
alert(usuarioTemp.nombre);
} else {
alert("fail");
}
});
};
return (
<View style={styles.container}>
<CalendarList markedDates={markedDates} onDayPress={infoDay} />
</View>
);
}

If you remove the else statement you'll only see the correct alerts.
const infoDay = (day) => {
this.state.usuarios.forEach((usuarioTemp) => {
if (day.dateString == usuarioTemp.date) {
alert(usuarioTemp.nombre);
}
});
};
If you want to travel trough a specific user, you must have to make a dict with the user names
For example:
let usuarioTemp = {
firstUser:{day: 17},
secondUser:{day: 19}
}
And your function could it be:
const infoDay = (day, userName) => {
if(usuarioTemp[userName].date === day){
alert(userName);
}
};
And finally, I suppose you are getting the data like this:
[{nombre:"Name", date:17}, {nombre:"Name2", date:19}]
You can use this function:
function groupBy(array, key) {
let arrayReduced = array.reduce(
(result, { [key]: k, ...rest }) => {
(result[k] = rest);
return result;
},
{}
);
return arrayReduced;
}
and you'll see the data like this:
{
"Name": {date: 17},
"Name2": {date: 19}
}
Test:
//Data example
let data = [{nombre:"Name", date:17}, {nombre:"Name2", date:19}]
//Function groupBy
function groupBy(array, key) {
let arrayReduced = array.reduce(
(result, { [key]: k, ...rest }) => {
(result[k] = rest);
return result;
},
{}
);
return arrayReduced;
}
//Usage
console.log(groupBy(data, "nombre"))
I hope it helps!

How to update async await function when a variable change?

genderPie()
let filter = {};
async function genderPie() {
const d = await getData();
const g = await d.reduce((a, o) => (o.GEN && a.push(o.GEN), a), []);
const gender = Object.keys(g).length;
const m = await d.reduce((a, o) => (o.GEN == 1 && a.push(o.GEN), a), []);
const male = Object.keys(m).length;
const f = await d.reduce((a, o) => (o.GEN == 2 && a.push(o.GEN), a), []);
const female = Object.keys(f).length;
var data = [{
name: 'male',
y: male,
id: 1
}, {
name: 'female',
y: female,
id: 2
}];
chart = new Highcharts.Chart({
plotOptions: {
pie: {
innerSize: '80%',
dataLabels: {
connectorWidth: 0
}
}
},
series: [{
"data": data,
type: 'pie',
animation: false,
point: {
events: {
click: function(event) {
filter.GEN = '' + this.id + '';
}
}
}
}],
"chart": {
"renderTo": "gender"
},
});
}
async function getData() {
buildFilter = (filter) => {
let query = {};
for (let keys in filter) {
if (filter[keys].constructor === Array && filter[keys].length > 0) {
query[keys] = filter[keys];
}
}
return query;
}
//FILTER DATA
//Returns the filtered data
filterData = (dataset, query) => {
const filteredData = dataset.filter((item) => {
for (let key in query) {
if (item[key] === undefined || !query[key].includes(item[key])) {
return false;
}
}
return true;
});
return filteredData;
};
//FETCH JSON
const dataset = [{
"GEN": "2"
}, {
"GEN": "1"
}, {
"GEN": "1"
}, {
"GEN": "2"
},
{
"GEN": "2"
}, {
"GEN": "2"
}, {
"GEN": "2"
}, {
"GEN": "1"
}
]
//BUILD THE FILTER
const query = buildFilter(filter);
const result = filterData(dataset, query);
console.log(result)
return result
}
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="gender"></div>
does anyone can explain me how to handle the following?
I have two functions that filter data and than I build a chart with Hichart
Each time a user click for example a slice of a pie chart an event is fired and an object is populated.
That object allows me to filter the dataset and redraw the chart
The last thing I'm missing is about to update the filtering functions based on the object to be populated
first I'll do this
async function getData() {
buildFilter = (filter) => {
let query = {};
for (let keys in filter) {
if (filter[keys].constructor === Array && filter[keys].length > 0) {
query[keys] = filter[keys];
}
}
return query;
}
then
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;
};
const query = buildFilter(filter);
const result = filterData(data, query);
my object is
let filter = {}
when a user click the slice myobject become for example
let filter = {
gen: "1"
}

Take a look at this StackBlitz project.
In getData(), I simplified your filter to this one:
return data.filter(item => {
for (const property of Object.keys(filter)) {
if (item[property] !== filter[property]) {
return false;
}
}
return true;
});
and when a slice is clicked, I call genderPie() again, after updating the filter.
You might want to separate the data request from the filtering, so that the data is downloaded only once, not every time a filter is changed.

change an element in an array of objects

I have data in the form of
data = [
{
"date":"2018-05-18T-6:00:00.000Z",
"something":"something1",
"something":"something1"
},
{
"date":"2018-05-19T-6:00:00.000Z",
"something":"something2",
"something":"something2"
}
]
How do I grab the first element in the objects, edit them, then replace them back in the object?
So it should look like this
data = [
{
"date":"2018-05-18",
"something":"something1",
"something":"something1"
}
{
"date":"2018-05-19",
"something":"something2",
"something":"something2"
}
]
I have tried something like this
var date = [];
const getSessions = () => {
loginService.getUser().then((response) => {
var user_id = response.data.id;
console.log("getUser returning this => ", response.data);
loginService.getUserSessions(user_id).then((response) => {
$scope.sessions = response.data;
for (var i = 0; i < $scope.sessions.length; i++){
date.push($scope.sessions[i].next_class.slice(0,10));
};
$scope.sessions.push(date);
console.log($scope.sessions);
This gets the date shortened but doesn't replace the original date in the object.

You can do something like -
var data = [
{
"date":"2018-05-18T-6:00:00.000Z",
"something":"something1",
},
{
"date":"2018-05-19T-6:00:00.000Z",
"something":"something2"
}
]
data.forEach((record) => {
record.date = record.date.split("T")[0]
})
console.log(data);

You can do this also.
`
newArray = data.map(obj => {
dateIntoString = moment(obj.date).format('YYYY-MM-DD');
obj.date = dateIntoString;
return obj;
});
`

How to pick data from array and create a single Object from it?

I want to create a single object from an array of objects. Please refer the code provided.
Here's the input array
let queryArr = [
{
query: {
filter: {
term: {
search: 'complete',
}
}
}
},
{
query: {
notFilter: {
term: {
search: 'failed',
}
}
}
},
{
query: {
bool: {
term: {
search: 'complete',
}
}
}
}
]
The expected output
let oneQuery = {query: {
bool: { ... },
filter: { ... },
notFilter: { ... } // data from respective array object key
}};
The function I wrote
function createQuery(arr){
for(let i = 0; i < arr.length; i++){
if(Object.keys(arr[i].query === 'bool')){
oneQuery.query.bool = arr[i].query.bool;
}
if(Object.keys(arr[i].query === 'filter')){
oneQuery.query.filter = arr[i].query.filter;
}
if(Object.keys(arr[i].query === 'notFilter')){
oneQuery.query.notFilter = arr[i].query.notFilter;
}
}
return oneQuery;
}
createQuery(queryArr);
The output I'm getting:
query: {
bool: { ... },
filter: undefined,
notFilter: undefined
}
I don't get what I'm doing wrong here. A solution using reduce or map will be preferred.

Use Array.map() to get an array with the contents of each query property, then spread into Object.assign() to combine to a single object:
const queryArr = [{"query":{"filter":{"term":{"search":"complete"}}}},{"query":{"notFilter":{"term":{"search":"failed"}}}},{"query":{"bool":{"term":{"search":"complete"}}}}];
const createQuery = (arr) => ({
query: Object.assign({}, ...queryArr.map(({ query }) => query))
});
console.log(createQuery(queryArr));
To fix your code, initialize the query item, and get the 1st key from each item in the array - arr[i].query)[0]:
const queryArr = [{"query":{"filter":{"term":{"search":"complete"}}}},{"query":{"notFilter":{"term":{"search":"failed"}}}},{"query":{"bool":{"term":{"search":"complete"}}}}]
function createQuery(arr){
const oneQuery = { query: {} };
for(let i = 0; i < arr.length; i++){
if(Object.keys(arr[i].query)[0] === 'bool'){
oneQuery.query.bool = arr[i].query.bool;
}
if(Object.keys(arr[i].query)[0] === 'filter'){
oneQuery.query.filter = arr[i].query.filter;
}
if(Object.keys(arr[i].query)[0] === 'notFilter'){
oneQuery.query.notFilter = arr[i].query.notFilter;
}
}
return oneQuery;
}
console.log(createQuery(queryArr));

You problem seems to be this line
Object.keys(arr[i].query === 'filter')
This evaluates to Object.keys(true) or Object.keys(false)
Use reduce
queryArr.reduce( (acc, c) => (
acc[ Object.keys(c.query)[0] ] = Object.values(c.query)[0], //set the first key and value to accumulator
acc ), //return the accumulator
{}); //initialize accumulator to {}