We Keep Coding

Render nested string inside of object

I'm trying to render a dynamic list of fields from a JSON file.
Some fields have to go through this accountFieldMap object I created for key renaming purposes.
For example it finds the key userFirstName1 from the JSON and renders the value of it as firstName at the component.
const accountFieldMap = {
firstName: "userFirstName1",
lastName: "userLastName1",
ID: "userID",
location: `userLocation.city`,
};
The only issue is with the location field.
How can I let JavaScript know that it should render that city nested field and show it as location?

If I understand you correctly, location.city is a path to some value in object.
There are some libraries for this like lodash, which have inbuilt functions that can resolve that, but if you want to do it in vanilla js, you can do it by splitting this string by dot and going through that array to get a value.
const getByPath = (path, obj) => {
const splittedPath = path.split(".");
return splittedPath.reduce((acc, curr) => {
acc = obj[curr];
return acc;
}, obj)
}
So in this case if you have object like
const testObj = {
location: {city: "Kyiv"},
firstName: "Oleg"
}
It will return you "Kyiv" if you will pass into getByPath "location.city" as path. And it will also work in case if there is no nesting, so
getByPath("firstName", testObj)
will return you "Oleg"

you only have to map the array and create a new object;
import fileData from "../path/to/json";
const people = fileData.arrayName.map(person => ({
firstName: person.userFirstName1,
lastName: person.userLastName1,
ID: person.userID,
location: person.userLocation.city,
}));

How to add a Promise .then() to an Array.push?

I have an array however, one of the object children needs to get data from another location in my Firebase Database to show in the array. This requires a Promise.
How do I show the data from the Promise in the array?
getListofReferrers() {
//
//
// Getting list of referrers from Firebase.
this.eventData.getReferrersList().on('value', snapshot => {
let rawList98 = [];
snapshot.forEach(snap => {
// Bringing the information over into a local array to show on the page.
rawList98.unshift({
id: snap.key,
text: this.eventData.getOtherNameExternal(snap.val().userid).then( (v)=> {return v}),
userid: snap.val().userid,
username: snap.val().username,
email: snap.val().useremail,
referralPoints: this.eventData.numberWithCommas(this.eventData.getOtherProfileProperty(snap.val().userid, "referralPoints") || 0),
});
})
// Taking the information into a "this." variable
this.referralList = rawList98;
console.log(this.referralList);
});
}
I keep getting: [object Promise] when showing the "username" value.
In console.log(rawList98); however, I get the following:
email: "pjoc#pjaguar.com"
id: "referrer9OxMTyUDfiXrLp9O65XW0hUbHgH2"
referralPoints: "0"
username: t
__zone_symbol__state: true
__zone_symbol__value: "John Doe"
[[Prototype]]: Object
userid: "9OxMTyUDfiXrLp9O65XW0hUbHgH2"
How come it's showing the value received from the Promise but I can't capture that in the .then() to properly assign to the child "username"? I will need to call this Promise getting the username for every node in the Firebase Database

Since you need to wait for the username to be available before you can construct the object, you need to put the code inside the .then:
this.eventData.getUserName(snap.val().userid).then(v => {
rawList98.unshift({
id: snap.key,
username: v,
userid: snap.val().userid,
email: snap.val().useremail
});
})
Or, using async/await:
async function someFunction () {
const v = await this.eventData.getUserName(snap.val().userid);
rawList98.unshift({
id: snap.key,
username: v,
userid: snap.val().userid,
email: snap.val().useremail
});
}

The username property that you're pushing into the array is a promise. So to get the actual value in there, you need to use then or await:
const user = rawList98.shift();
const username = await user.username;
console.log(username);

Thanks to Frank van Puffelen. Here was the solution to my issue: I had to put the unshift() in a variable to get the index and use that to assign the username child afterward. I use rawList98.length-user since the unshift function is adding data to the bottom, not the top.
getListofReferrers() {
// Getting list of referrers from Firebase.
this.eventData.getReferrersList().on('value', snapshot => {
let rawList98 = [];
snapshot.forEach(snap => {
var user
user = rawList98.unshift({
id: snap.key,
username: null,
userid: snap.val().userid,
email: snap.val().useremail,
referralPoints: this.eventData.numberWithCommas(this.eventData.getOtherProfileProperty(snap.val().userid, "referralPoints") || 0),
});
this.eventData.getOtherNameExternal(snap.val().userid).then( (v)=> { rawList98[rawList98.length-user].username = v})
})
// Taking the information into a "this." variable
this.referralList = rawList98;
console.log(this.referralList);
});
}

Simplify nested for loop

I have this code:
let peopleInRoom = [];
for (let message of messages) {
for (let email of message.user.email) {
if (!peopleInRoom.includes(email)) {
peopleInRoom.push(email);
}
}
}
let peopleInRoomElement = peopleInRoom.map(person => (
<li>{person}</li>
))
Basically I am trying to get all the unique emails and display them.
Is there a shorter and more efficient way (maybe some ES6 features) to write the same code? Seems too much code than needed.
I looked at this answer: How to get distinct values from an array of objects in JavaScript?
EDIT: Above code does not do what I want.
My data looks like this:
[
{
text: 'foo',
user: { email: 'foo#bar.com', password: 'foo' }
},
{
text: 'baz',
user: { email: 'baz#qux.com', password: 'baz' }
}
]
The objects are all messages. And I want to get an array of all the unique emails from each message

You can use the Set object that is built into JavaScript. Set object actually keep the distinct primitive values.
const messages = [
{
text: 'foo',
user: { email: 'foo#bar.com', password: 'foo' }
},
{
text: 'baz',
user: { email: 'baz#qux.com', password: 'baz' }
}
]
const peopleInRoom = [...new Set(messages.map(message => message.user.email))];
It actually extracts the email from each message and then passes it to the Set object which only keeps the unique set of emails. After that, it will spread that Set to the array, since Set is also an iterable and returns the array of the people in room.

If I understand correctly, people have messages, messages have email addresses and the OP seeks the unique set of email addresses. If that's all the data available, then there's no alternative but to iterate it, checking to see if each email has been collected already, and collecting it if it hasn't been.
There are ways to conceal this work by doing it in library code. Probably the highest level utility is lodash's _.uniqueBy, but the work must be done one way or another.

The Set object enforces uniqueness of its elements. You can use it this way:
const peopleInRoom = Array.from(new Set(messages.map(message => message.user.email)));

First you can make an array of all the email addresses:
const data = [
{
text: 'foo',
user: { email: 'foo#bar.com', password: 'foo' }
},
{
text: 'baz',
user: { email: 'baz#qux.com', password: 'baz' }
}
]
const emailArray = data.map((elem) => {
return elem.user.email;
}
and then you can filter them to be unique:
function onlyUnique(value, index, self) {
return self.indexOf(value) === index;
}
emailArrayFiltered = emailArray.filter(onlyUnique);
see here for ref link

What about:
const peopleInRoom = messages.map(e => e.user.email && e.user.email);
console.log(peopleInRoom)
gives you this output:
["foo#bar.com", "baz#qux.com"]

Pushing responses of axios request into array

I have been pounding my head against this problem, and need help with a solution. I have an array of IDs within a JSON, and I am iterating over that array and making a GET request of each ID. I want to then push the response of those GET requests into an array.
Here is the function I am using to push the registrations into the array. It is iterating through an array of IDs:
getRegistrations = async (event) => {
let registrations = [];
await event.registrations.forEach(registration => axios.get('/event/getRegistration', {
params: {
id: registration
}
}).then(res => {
registrations.push(res.data.properties)
}
).catch(err => console.log(err)));
return registrations;
};
Here is where I am calling that code:
render() {
let event = this.getEvent();
let registrations2 = [{
age: 19,
bio: 'test',
firstName: 'hello',
lastName: 'bye',
password: 'adadas',
telephone: "4920210213"
}];
if (this.props.listOfEvents.events.length !== 0 && !this.props.listOfEvents.gettingList && event) { //check if the array is empty and list has not been rendered yet
let columns = [];
let registrations = this.getRegistrations(event);
console.log(registrations);
let eventProperties = event.properties[0];
Object.keys(eventProperties).forEach(key => columns.push({
title: eventProperties[key].title,
dataIndex: key,
key: key
}));
console.log(registrations);
console.log(registrations2);
return (
<h1>hi</h1>
)
}
return <Loading/>
}
When I console-log 'registrations' vs 'registrations2' they should be very identical. However, in the javascript console on Google Chrome, 'registrations appears as '[]' where 'registrations2' appears as '[{...}]'.
I know that it is an issue related to promises (I am returning the registrations array before actually pushing) but I have no idea how to fix it! Some friendly help would be very much appreciated!

I recommend Promise.all, it will resolve single Promise after all promises have resolved. And technically async function is also promise so it will return promise.
here the example.
https://codesandbox.io/s/jzz1ko5l73?fontsize=14

You need to use componentDidMount()lifecycle method for proper execution and state to store the data.
constructor (props) {
super(props);
this.state = {registrations :[]}
}
componentDidMount () {
let response = this.getRegistrations()
this.setState({registrations : response});
}
Then access that state in render method. It's not good practice to call api from render mothod.

Since getRegistrations(event) returns a promise, you should perform operations on its return value inside then.
Instead of
let registrations = this.getRegistrations(event);
console.log(registrations);
Do this
this.getRegistrations(event).then(registrations => {
console.log(registrations);
// other operations on registrations
});

How do I turn part of Redux store into an array

Okay, here's the pickle that I'm in, one of my actions in actions/index.js is:
export function requestPeople() {
return (dispatch, getState) => {
dispatch({
type: REQUEST_PEOPLE,
})
const persistedState = loadState() // just loading from localStorage for now
console.log(persistedState)
//Object.keys(persistedState).forEach(function(i) {
//var attribute = i.getAttribute('id')
//console.log('test', i,': ', persistedState[i])
//myArr.push(persistedState[i])
//})
//console.log(myArr)
//dispatch(receivePeople(persistedState)) // I'm stuck here
}
}
and when I console.log(persistedState) from above in the Chrome console I get my people state exactly like this.
Object {people: Object}
Then when I drill down into people: Object above, I get them like this:
abc123: Object
abc124: Object
abc125: Object
and when I drill down into each one of these puppies (by clicking on the little triangle in Chrome console) I get each like this:
abc123: Object
firstName: 'Gus'
id: 'abc123'
lastName: 'McCrae'
// when I drill down into the second one I get
abc124: Object
firstName: 'Woodrow'
id: 'abc124'
lastName: 'Call'
Now, here's where I'm stuck.
The table I'm using is Allen Fang's react-bootstrap-table which only accepts array's, and it get's called like this <BootstrapTable data={people} /> so my above data needs to be converted to an array like this:
const people = [{
id: abc123,
firstName: 'Gus',
lastName: 'McCrae'
}, {
id: abc124,
firstName: 'Woodrow',
lastName: 'Call'
}, {
...
}]
// and eventually I'll call <BootstrapTable data={people} />
My question specifically is how do I convert my people state shown above into this necessary array? In my action/index.js file I've tried: Object.keys(everything!!!)
And lastly, once I have the array, what's the best way to pass that array into <BootstrapTable data={here} /> using state, a variable, a dispatched action, something I've never heard of yet?
Any help will be very much appreciated!! FYI, this is my first question in Stack Overflow, feels nostalgic. I'm a full-time police officer, and trying learn to code on the side. Thanks again!
UPDATE:
Thanks to a suggestion by Piotr Berebecki, I'm tying it this way:
export function requestPeople() {
return (dispatch, getState) => {
dispatch({
type: REQUEST_PEOPLE,
})
const persistedState = loadState()
console.log('persistedState:', persistedState)
const peopleArr = Object.keys(persistedState.people).map(function(key) {
return persistedState[key]
})
console.log(JSON.stringify(peopleArr))
//dispatch(receivePeople(persistedState))
}
}
and getting [null,null,null]
like this:

Welcome to Stack Overflow :)
To convert your nested persistedState.people object to an array you can first establish an interim array of keys using Object.keys(persistedState.people) and then map() over the keys to replace each key with an object found in your original nested object - persistedState.people - at that key. You can assign the resultant array to a variable which you can then pass to the BootstrapTable. Check the code below and a demo here: http://codepen.io/PiotrBerebecki/pen/yaXrVJ
const persistedState = {
people: {
'abc123' : {
id:'abc123',firstName: 'Gus', lastName: 'McCrae'
},
'abc124' : {
id:'abc124',firstName: 'Woodrow', lastName: 'Call'
},
'abc125' : {
id:'abc125',firstName: 'Jake', lastName: 'Spoon'
}
}
}
const peopleArr = Object.keys(persistedState.people).map(function(key) {
return persistedState.people[key];
});
console.log(JSON.stringify(peopleArr));
/*
Logs the following array:
[
{"id":"abc123","firstName":"Gus","lastName":"McCrae"},
{"id":"abc124","firstName":"Woodrow","lastName":"Call"},
{"id":"abc125","firstName":"Jake","lastName":"Spoon"}
]
*/