We Keep Coding

Remove all the elements of the array in React JS

I have written a function which is triggered by a dropdown list's onChange event.
Once the function is triggered, it load data from rest API according to the parameter value. However, the array which I have used to store those data is not cleared in the subsequent dropdown change events. As a result, when the user change the dropdown multiple times, the array grows with its previously loaded data.
for example:
In first drop down change => ['A','B','C']
2nd drop down change => ['A','B','C','E','F','G'] instead of ['E','F','G']
My code is as follows:
onDropdownChange = (e) => {
var newArray = [];
// To remove all the elements of newArray
newArray.forEach((e1,idx, arr) => {
newArray.splice(idx,1);
});
console.log(newArray);
const url = 'https://abcdefgh...../' + e + '/readings?today';
newArray = this.state.data.slice();
axios.get(url).then(res => {
var response_arr = res.data.items;
res.data.items.forEach((item, index) => {
newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value })
})
let sortedArray = newArray.sort((a, b) => new Date(a.time).getTime() - new Date(b.time).getTime());
this.setState({ data: sortedArray });
this.fetchChart();
});
}
fetchChart = () => {
const { data } = this.state;
return <CustomLineChart data={data} />
}
render(){
const {items} = this.state;
var data = [];
const itemList = items.map(item => {
return <tr key={item.dateTime+''+item.value}>
<td style={{whiteSpace: 'nowrap'}}>{item.dateTime}</td>
<td>{item.measure}</td>
<td>{item.value}</td>
</tr>
});
return (
<div>
{this.fetchChart()}
<CustomDropdownList changeLink={this.onDropdownChange.bind(this)} />
</div>
);
}
}
export default Dashboard;
Can anybody assist me to resolve this issue?

You are copying the previous data with
newArray = this.state.data.slice();
You do not need that.. In fact you do not need any of this if you want to create a new array with new options.

You're adding the results to newArray which starts out empty that you tried to clear, then it's set to the existing data with additional data added. Also, avoid using var.
var newArray = [];
// This is already empty
newArray.forEach((e1,idx, arr) => {
newArray.splice(idx,1);
});
// This will always be empty
console.log(newArray);
const url = 'https://abcdefgh...../' + e + '/readings?today';
// Existing data, remove this
newArray = this.state.data.slice();
axios.get(url).then(res => {
var response_arr = res.data.items;
res.data.items.forEach((item, index) => {
// This is where new data is being added to existing
newArray.push({ time: res.data.items[index].dateTime, TM: res.data.items[index].value })
})

only one object being set to app.set() Expressjs

Good Afternoon,
I am using the MERN stack to making a simple invoice application.
I have a function that runs 2 forEach() that goes through the invoices in the DB and the Users. if the emails match then it gives the invoices for that user.
When I log DBElement to the console it works, it has the proper data, but when I log test1 to the console (app.get()) it only has one object not both.
// forEach() function
function matchUserAndInvoice(dbInvoices, dbUsers) {
dbInvoices.forEach((DBElement) => {
dbUsers.forEach((userElement) => {
if(DBElement.customer_email === userElement.email){
const arrayNew = [DBElement];
arrayNew.push(DBElement);
app.set('test', arrayNew);
}
})
})
}
// end point that triggers the function and uses the data.
app.get('/test', async (req,res) => {
const invoices = app.get('Invoices');
const users = await fetchUsersFromDB().catch((e) => {console.log(e)});
matchUserAndInvoice(invoices,users,res);
const test1 = await app.get('test');
console.log(test1);
res.json(test1);
})

function matchUserAndInvoice(dbInvoices, dbUsers) {
let newArray = [];
dbInvoices.forEach((DBElement) => {
dbUsers.forEach(async(userElement) => {
if(DBElement.customer_email === userElement.email){
newArray.push(DBElement);
app.set('test', newArray);
}
})
})
}

app.set('test', DBElement); overrides the existing DBElement, so only the last matching DBElement is shown in test1.
If you want to have test correspond to all matching DBElement, you should set it to an array, and then append a new DBElement to the array each time it matches inside the for-loop:
if(DBElement.customer_email === userElement.email){
let newArray = await app.get('test');
newArray.push(DBElement);
app.set('test', newArray);
}

Retriving split data from firebase

// how I get the data
db.collection('Pins').get().then(snapshot => {
snapshot.forEach(pinInfo => {
pinsToMap(pinInfo)
});
});
// trying to set the data
function pinsToMap(pinInfo){
let pinName;
let pinCoOrdsLat;
let pinCoOrdsLong;
let pinToMapInfo;
pinName = doc.data().name
pinCoOrds = doc.data().coOrds
pinToMapInfo = doc.data().Info
Pins.child(Pins.coOrds).set({
coOrds: {
0:this = pinCoOrdsLat,
1:this = pinCoOrdsLong,
}
});
}
I am storing data in my database based off a map pin, I am now trying to use the stored data to create a pin on the map of the same place, how do I query out the coOrds in to pinCoOrdsLat / pinCoOrdsLong as this way doesn't seem to be working

If I correctly understand you question, the following should do the trick:
db.collection('Pins').get().then(snapshot => {
snapshot.forEach(pinInfo => {
pinsToMap(pinInfo)
});
});
// trying to set the data
function pinsToMap(pinInfo) { // IMPORTANT! => pinInfo is a DocumentSnapshot
const pinName = pinInfo.data().name
const pinCoOrds = pinInfo.data().coOrds
const pinToMapInfo = pinInfo.data().Info
//pinCoOrds is a JavaScript Array with two elements
const pinCoOrdsLat = pinCoOrds[0];
const pinCoOrdsLong = pinCoOrds[1];
//Use pinCoOrdsLat and pinCoOrdsLong the way you want, e.g. calling a leaflet method
}
You'll find here the doc for a DocumentSnapshot

How to return an array of children from firebase in React-Native

My Firebase data base contains JSON objects, each with the same parameters as seen below. Firebase data
I want to get an array that has each objects country. So if I have 4,000 objects I want to get an array of 4,000 strings all containing a country.
Right now I can get the console to log all the 4,000 objects into an array using the code below.
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
var data1 = [];
var fireBaseResponse = firebase.database().ref();
fireBaseResponse.once('value').then(snapshot => {
snapshot.forEach(item => {
var temp = item.val();
data1.push(temp);
return false;
});
console.log(data1);
});
}
But when I try doing
var fireBaseResponse = firebase.database().ref().child('country');
I get an array of nothing.
Any help would be great.

As mentioned in the comments, you can create a new temp object containing just country before pushing it into your array.
snapshot.forEach(item => {
var temp = { country: item.val().country };
data1.push(temp);
return false;
});

use knex to dynamically create join table

I'm learning knex right now and trying to dynamically insert the id numbers from two different tables into the empty table that will be used as a join table later on.
This is what I have so far, but I feel I'm way off base at the moment.
exports.seed = function(knex, Promise) {
return knex('future_join_table').del()
.then(function () {
return Promise.all([
// Inserts seed entries
knex('future_join_table').insert({
first_id: knex('table1').select('id'),
second_id: knex('table2').select('id')
})
]);
});
};

exports.seed = (knex) => {
let table1Array = [];
const toBeInsertRows = []
return knex('future_join_table').del()
.then(() => knex.select('id').from('table1'))
.then((rows) => {
table1Array = rows;
return knex.select('id').from('table2')
})
.then((rows) => {
rows.forEach((row, index) => toBeInsertRows.push({ first_id: table1Array[index].id, second_id: row.id }))
return knex('future_join_table').insert(toBeInsertRows);
});
}
The code above assume your table1 and table2 have same number of item.
I don't know why would you make a middle table in this way, but so far we can't perform any join operation base on your information.