I'm getting a list of objects as a response like this
As you can see the objects are not in an array. I want to push these objects into an array. I tried the following way
this.setState({
countrydata: this.state.countrydata.push(datasnapshot.val()),
})
But it didn't work. What's the correct approach to push these objects into an array?
PS:
componentDidMount() {
const countryCode = this.props.match.params.countryCode;
var countryName = getName(countryCode);
var firebaseHeadingref = firebase.database().ref(countryCode);
firebaseHeadingref.once('value').then(datasnapshot => {
this.setState({
countrydata: datasnapshot.val(),
countryName: countryName,
loading: false
})
});
}
I think that the "countrydata" in a dict not an array.
Try to initialize the it as an empty array.
Array.prototype.push returns the new length of the array after the push, so you are essentially setting the state to a number.
You are not allowed to mutate the array with React state, you need to create a new array containing your new elements:
// When updating state based on current state, use the function form of setState.
this.setState(state => {
countrydata: [...state.countrydata, datasnapshot.val()],
})
This is assuming countryData is indeed an array, which from your screenshot, it appears to not (it seems to be an object), so you may be set something wrong somewhere along the way (or datasnapshot.val()) doesn't contain what you think it contains.
You could do this:
const keys = Object.keys(countryData); // array of the keys ["place_1", ...]
const array = Array(keys.length); // Prepares the output array of the right size
for (let i=0; i<keys.length; i++) {
const country = countryData[keys[i]]; // get the next country object
country.key = keys[i]; // add the key into the object if you need it
array[i] = country; // store the value into the array at index 'i'
}
// array now is [ {key: "place_1", description: "Sigiriya Rock Fortress"}, ...]
this.setState({countryDataArray: array});
You could try something like this. Array.prototype.push().
I have not tested below code.
componentDidMount=async() =>{
const countryCode = this.props.match.params.countryCode;
var countryName = getName(countryCode);
var firebaseHeadingref = firebase.database().ref(countryCode);
const datasnapshot = await firebaseHeadingref.once('value');
this.setState(prevState=>{
...prevState,
countryName,
countrydata: [...prevState.countrydata, datasnapshot.val()],
loading: false,
},()=>console.log("done!"))
}
You need to convert the response data from firebase to an array like this:
componentDidMount() {
const countryCode = this.props.match.params.countryCode;
var countryName = getName(countryCode);
var firebaseHeadingref = firebase.database().ref(countryCode);
firebaseHeadingref.once('value').then(datasnapshot => {
const countryData = datasnapshot.val();
const countryDataArray = [];
for (const key in countryData) {
countryDataArray.push({ key, ...countryData[key]});
}
this.setState({
countrydata: countryDataArray,
countryName: countryName,
loading: false
})
});
}
Use for-in to loop through the object or use Object.keys().
const data = datasnapshot.val();
const countrydata = [];
for (let key in data) {
countrydata.push(data[key])
}
// using Object.keys()
Object.keys(data).forEach((key) => countrydata.push({ [key]: data[key]}))
this.setState({
countrydata
})
const data = {
place1: { name: 'One'},
place2: { name: 'Two'},
place3: { name: 'Three'},
};
const countrydata = [];
for (let key in data) {
countrydata.push({ [key]: data[key] });
}
console.log(countrydata);
Related
I want to make filter by date with this object of array
const mapDateRange = () => {for (let elem in catchData) {
let x = {startDate:catchData[elem][0],finishDate:catchData[elem][1]};
return x;
}};
but its only catch one object of array
this is latest data has processing
const data = {
["01-08-2019", "08-08-2019"],
["08-08-2019", "15-08-2019"],
["15-08-2019", "22-08-2019"],
["22-08-2019", "29-08-2019"]
};
this is what i expected
const data = [
{
startDate:"01-08-2019", finisDate:"08-08-2019"
},
{
startDate:"08-08-2019", finisDate:"15-08-2019"
},
{
startDate:"15-08-2019", finisDate:"22-08-2019"
},
{
startDate:"22-08-2019", finisDate:"29-08-2019"
}
];
So there are a few problems in the code you wrote:
Your data started as an object ({}), but its built as an array, so I corrected that.
Your function mapDateRange uses catchData but it does not exist anywhere so I made the function except an argument, which will be the catchData.
Most important: You returned x which is only 1 item in the array of data. So I created an empty array and pushed x values to the array.
const data = [
["01-08-2019", "08-08-2019"],
["08-08-2019", "15-08-2019"],
["15-08-2019", "22-08-2019"],
["22-08-2019", "29-08-2019"]
];
const mapDateRange = (catchData) => {
let new_data = [];
for (let elem in catchData) {
let x = {
startDate: catchData[elem][0],
finishDate: catchData[elem][1]
};
new_data.push(x);
}
return new_data;
};
console.log(mapDateRange(data));
const data = [
["01-08-2019", "08-08-2019"],
["08-08-2019", "15-08-2019"],
["15-08-2019", "22-08-2019"],
["22-08-2019", "29-08-2019"]
];
const mapDataRange = (data) => {
const result = [];
data.forEach((item) => {
const x = { 'startDate': item[0], 'finishDate': item[1] };
result.push(x);
});
return result;
}
console.log(mapDatatRange(data));
In this way you will get your desire result by using map function
data = data.map((obj) => {
return {
startDate: obj[0],
finishDate: obj[1]
}
});
console.log(data)
try to do with .map and array destructuring with ES6 syntax
data.map(([ startDate, finishDate ]) => { startDate, finisDate })
I'm attempting to re-map an Object that comes from an API call.
The format of the response is the following:
data: {
foo: [{
id: "1",
name: "joe",
info: "whatever"
}, {
id: "2",
name: "anna",
info: "whatever"
},...],
bar: [...]
}
The code I'm using to re-map the object inside each response array is:
const DATA = response.data;
const entries = Object.entries(DATA);
for (const entry of entries) {
entry[1].map(entry => ({
id: entry["id"],
mixed_info: entry["name"] + ", " + entry["info"]
}));
}
When I console.log the data after this, it shows the same as the initial response, as if it completly ignored the map function.
What am I doing wrong? Thanks for the attention.
map returns a new array, you are ignoring the result of the call.
Assign the result of the map call:
entry[1] = entry[1].map(...);
Array.prototype.map returns a new array - it doesn't modify the original.
You have to reassign the entry:
entry[1] = entry[1].map(/*...*/);
However that will only get reflected to the array inside entries, it won't change DATA. To change that, you have to either turn the key value pairs back into an object at the end:
DATA = Object.fromEntries(entries);
Or you have to reassign the DATA properties while iterating:
DATA[ entry[0] ] = entry[1].map(/*...*/);
I'd do:
const { data } = response;
for(const [key, value] of Object.entries(data)) {
data[key] = value.map(/*...*/);
}
let result = {};
for (const entry of entries) {
result[entry[0]] = entry[1].map(entry => ({
id: entry.id,
mixed_info: `${entry["name"] }, ${ entry["info"]}`,
}));
}
'result' contains exact remapped object.
I'm getting data from a geojson file and I want to flatten an array within an array to be able to show this data within a material table.
I have the following code:
const geoListData: Array<any> = [];
const features = geoData.features; // feature array
const latIdx = 0;
const lonIdx = 1;
// iterate over each feature
features.forEach((feature: any) => {
const geoListArray: any = [];
// build up GeoListEntry
const geoListEntry: GeoListEntry = {
name: feature.properties.name,
category: feature.properties.category,
lat: feature.geometry.coordinates[latIdx],
lon: feature.geometry.coordinates[lonIdx],
prio: feature.properties.prio
};
geoListArray.push(geoListEntry);
// get values from geojson
feature.properties.values.forEach((element: any) => {
const valuesEntry: any = {
[element.name]: element.value
};
geoListArray.push(valuesEntry);
});
this.logger.debug(`geoListArray: ${JSON.stringify(geoListArray)}`);
geoListData.push(geoListArray);
});
return geoListData;
}));
My logger output looks like that:
[{"name":"90","category":"Arc 12 month","lat":7.613333333,"lon":47.555555,"prio":0},{"bearing":12345},{"intensity_mean":0},{"intensity_min":0},{"intensity_max":0}]
But I want something like that:
[{"name":"90","category":"Arc 12 month","lat":7.613333333,"lon":47.555555,"prio":0,"bearing":12345,"intensity_mean":0,"intensity_min":0,"intensity_max":0}]
I'm close, but I can't find the solution.
Do you have any idea?
Instead of pushing it to array, add property directly to the object
// iterate over each feature
features.forEach((feature: any) => {
const geoListArray: any = [];
// build up GeoListEntry
const geoListEntry: GeoListEntry = {
name: feature.properties.name,
category: feature.properties.category,
lat: feature.geometry.coordinates[latIdx],
lon: feature.geometry.coordinates[lonIdx],
prio: feature.properties.prio
};
// get values from geojson
feature.properties.values.forEach((element: any) => {
geoListEntry[element.name] = element.value
});
geoListArray.push(geoListEntry);
this.logger.debug(`geoListArray: ${JSON.stringify(geoListArray)}`);
geoListData.push(geoListArray);
});
In my post request I need to pass an array with an object inside it.
when I tried to add new properties inside an object its adding.
but when I tried to add when an object is present inside an array its not adding.
I have sportsvalues as array const sportsValues = [{ ...values }];
I am trying to build something like this, so that I can pass in the api
[
{
"playerName": 3,
"playerHeight": 1
}
]
can you tell me how to fix it.
providing my code snippet below.
export function sports(values) {
const sportsValues = [{ ...values }];
sportsValues.push(playerName:'3');
console.log("sportsValues--->", sportsValues);
// sportsValues.playerName = 3//'';
// sportsValues.playerHeight = 1//'';
console.log("after addition sportsValues--->", sportsValues);
console.log("after deletion sportsValues--->", sportsValues);
return dispatch => {
axios
.post(`${url}/sport`, sportsValues)
.then(() => {
return;
})
.catch(error => {
alert(`Error\n${error}`);
});
};
}
Since sportsValues is an array of objects, you can push new object into it. Check out code below.
const sportsValues = [];
sportsValues.push({
playerName:'3',
playerHeight: 1,
});
console.log(sportsValues);
I don't fully understand what you're trying to do, but here's some pointers:
If you're trying to update the object that's inside the array, you first have to select the object inside the array, then update it's attribute:
sportsValues[0].playerName = 3
although, I recommend building the object correctly first, then passing it to the array, it makes it a little easier to understand in my opinion:
const sportsValues = [];
const firstValue = { ...values };
firstValue.playerName = '3';
sportsValues.push(firstValue);
or
const firstValue = { ...values };
firstValue.playerName = '3';
const sportsValues = [firstValue];
or
const sportsValues = [{
...values,
playername: '3',
}];
if you're trying to add a new object to the array, you can do this:
const sportsValues = [{ ...values }];
sportsValues.push({ playerName: '3' });
etc...
Array.push adds a new item to the array, so in your code, you're going to have 2 items because you assign 1 item at the beginning and then push a new item:
const ar = [];
// []
ar.push('item');
// ['item']
ar.push({ text: 'item 2' });
// ['item', { text: 'item 2' }]
etc...
export function sports(values) {
const sportsValues = [{ ...values }];
sportsValues.push(playerName:'3');
let playerName='3'
sportsValues.playerName= playerName; // you can bind in this way
console.log("sportsValues--->", sportsValues);
return dispatch => {
axios
.post(`${url}/sport`, sportsValues)
.then(() => {
return;
})
.catch(error => {
alert(`Error\n${error}`);
});
};
}
I have this in my state:
fbPages:{'123':'Teste','142':'Teste2'}
But I need something like this dynamically:
async getFbPages(){
var fbPages = {}
await this.props.resultPosts.facebookPagesList.data.map(item => {
fbPages.push({item.id: item.name});
});
this.setState({fbPages});
console.log(this.state);
}
I got a error here fbPages.push({item.id: item.name});, how can I do this?
You are using push but fbPages is not an array.
If you want to add another property to the object do fbPages[item.id] = item.name; instead
var fbPages = {};
await this.props.resultPosts.facebookPagesList.data.map(item => {
fbPages[item.id] = item.name;
});
Unless you wanted an array to begin with, then declare it as such instead var fbPages = []
var fbPages = [];
await this.props.resultPosts.facebookPagesList.data.map(item => {
fbPages.push({
item.id: item.name
});
});
Please find below sample snippet:
const items = [{
id:'123',
name:'Teste'
},{
id: '142',
name: 'Teste2'
}];
let fbPages = []; // This should be array.
items.map((item)=> {
fbPages.push({
[item.id]: item.name
})
});
console.log(fbPages);
Object does not support push method you need to define fbPages to array
var fbPages= [];
fbPages[0] ={'123':'Teste','142':'Teste2'}
And in Function
async getFbPages(){
var fbPages= [];
await this.props.resultPosts.facebookPagesList.data.map(item => {
fbPages.push({item.id: item.name});
});
this.setState({fbPages});
console.log(this.state);
}