Update:
This problem seems to be related to mongoose. Please see update at the bottom.
In the parent I use the following code to pass choosenItem to a grandChild:
childContextTypes: {
foo: React.PropTypes.object.isRequired,
},
getChildContext: function() {
return { foo: this.state.choosenDriver }
},
choosenDriver is a mongoose Model that looks like this:
var Schema = mongoose.Schema;
var driverSchema = new mongoose.Schema({
driver: String,
age: String,
cars: [{ type: Schema.Types.ObjectId, ref: 'Car' }]
});
module.exports = mongoose.model('Driver', driverSchema);
This works fine and in the GrandChild I can do the following:
contextTypes: {
foo: React.PropTypes.object.isRequired,
},
//some other stuff...
render: function(){
return (
<h1>{this.context.foo.name}</h1>
)
});
And this displays the name of the choosenDriver.
I would also like to loop through the cars and thought it could be done like this:
render: function(){
var cars = new Array(this.context.foo.cars);
var driversCars = cars.map(function(car,i){
return <li key={i}> {car} </li>;
});
return (
<div>
<h1>{this.context.foo.name}</h1>
<ul>{driversCars}</ul>
</div>
)
}
});
This returns all the drivers cars in a string displayed on one single line.
I took a look in react developers tool and saw that cars is not defined as an Array.
Is this maybe because choosenDriver is a state and arrays are not supported in this manner?
The cars obviously exists but not as an Array.
Any ideas on how to access cars as an Array in this example?
Thank you!
Update:
When looking at this.context.foo.cars in react-Tools i see this:
cars:
->_proto_ :{..}
0: "4242594395935934",
1: "3543435095340509"
etc...
cars should be an Array so I would expect to see:
cars: Array[4]
Allthough in the DB everythingg looks as it should:
"cars":["5607b0747eb3eefc225aed61","5607b07a7eb3eefc225aed62","5606bf4b0e76916c1d1668b4","5607b07a7eb3eefc225aed62"]}]
Last Update:
Here they are next to eachother i react Tools:
(I have a list of drivers and this shows that the Driver-object Changes when it gets selected)
State:
choosenDriver: {..}
_v:0
_id: "235345353453"
name: "Roger"
cars:
->_proto_ :{..}
0: "4242594395935934",
_id: undefined
Same driver but not choosen:
drivers: array[3]
->0: {}
->1: {}
_v: 0
_id: "4242594395935934"
cars: Array[1]
So something happens to the Array when it gets selected. Weird...
If you mean cars is not the Array you expect (and not this.context.foo.cars)...
The Array constructor builds an array with each argument to the constructor as an element in the returned array.
So, new Array([1,2,3]) gives you: [[1,2,3]].
You want Array.from([1,2,3]) which will give you [1,2,3] which appears to be what you want.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array
But with your code, why can't you just skip creating the intermediate array and just call this.context.foo.cars.map(...) directly?
Related
I'm currently getting data from a database of an array of objects. I need these objects to be reformatted to work with a UI package that we're using that requires these objects to look a specific way. The main array should look like this:
[{
trim: 123,
id: 123,
children: [{
trim: 123,
id: 123,
}],
}]
I'm successfully looping through the main array data and reformatting it into a new array using .map; however, I'm having issues doing the same thing but for the children key that's found in each object of the main array. Wondering if anyone could help me figure out the proper way to do this. I'll add my current code below and will be able to clarify more if needed.
if (this.$store.state.models.models) { // this is checking for the main array coming from the database
const reformattedModels = this.$store.state.models.models.map((model) => {
const tableModel = {
trim: model.name,
id: model.id,
children: // Need to loop here to reformat array of objects that goes for the children key,
};
return tableModel;
});
return reformattedModels;
}
The array that I need to loop through for the children key is one of the keys found in the main array from the backend. It's called "trims" and looks like this:
[{
name: 123,
id: 123,
}]
Create a reference to the function and call it recursively:
if (this.$store.state.models.models) {
// store the function
const mapper = model => ({
trim: model.name,
id: model.id,
// use it for children, if there are any
children: model.children?.map(mapper)
});
// use it for the models
return this.$store.state.models.models.map(mapper);
}
I'm using optional chaining (?.) to call .map() only if model.children != undefined
I need to set state on nested object value that changes dynamically Im not sure how this can be done, this is what Ive tried.
const [userRoles] = useState(null);
const { isLoading, user, error } = useAuth0();
useEffect(() => {
console.log(user);
// const i = Object.values(user).map(value => value.roles);
// ^ this line gives me an react error boundary error
}, [user]);
// This is the provider
<UserProvider
id="1"
email={user?.email}
roles={userRoles}
>
The user object looks like this:
{
name: "GGG",
"website.com": {
roles: ["SuperUser"],
details: {}
},
friends: {},
otherData: {}
}
I need to grab the roles value but its parent, "website.com" changes everytime I call the api so i need to find a way to search for the roles.
I think you need to modify the shape of your object. I find it strange that some keys seem to be fixed, but one seems to be variable. Dynamic keys can be very useful, but this doesn't seem like the right place to use them. I suggest that you change the shape of the user object to something like this:
{
name: "GGG",
site: {
url: "website.com",
roles: ["SuperUser"],
details: {}
},
friends: {},
otherData: {}
}
In your particular use case, fixed keys will save you lots and lots of headaches.
You can search the values for an element with key roles, and if found, return the roles value, otherwise undefined will be returned.
Object.values(user).find(el => el.roles)?.roles;
Note: I totally agree with others that you should seek to normalize your data to not use any dynamically generated property keys.
const user1 = {
name: "GGG",
"website.com": {
roles: ["SuperUser"],
details: {}
},
friends: {},
otherData: {}
}
const user2 = {
name: "GGG",
friends: {},
otherData: {}
}
const roles1 = Object.values(user1).find(el => el.roles)?.roles;
const roles2 = Object.values(user2).find(el => el.roles)?.roles;
console.log(roles1); // ["SuperUser"]
console.log(roles2); // undefined
I would recommend what others have said about not having a dynamic key in your data object.
For updating complex object states I know if you are using React Hooks you can use the spread operator and basically clone the state and update it with an updated version. React hooks: How do I update state on a nested object with useState()?
I am working on an Ionic 3 project,which uses Angular.
I have a JSON object like below called person. However, I have a Ionic toggle button which enables
various sections based on whats returned from person.
person = { name: "peter", job: "programmer", home: "somewhere"};
person_checked_values = {}
In order to update my toggles I need to pass a boolean. The keys are the same. How can I dynamically build a new object off of
whats returned from person KEYs, but set the value as true so person_checked_values results like below?
person_checked_values = { name: true, job: true, home: true};
I tried to foreach loop person and create a new object from that, but keep getting undefined and stumped. FWIW - I am using _lodash as well so if there is possibly someway to use help from that library its available.
You can use Object.keys to get all of the keys. You can then combine that with the .reduce function of arrays to build an object.
let person = {
name: "peter",
job: "programmer",
home: "somewhere"
};
let result = Object.keys(person).reduce((obj, key) => {
obj[key] = true;
return obj;
}, {})
console.log(result);
I have associative array.
It's a key(number) and value(object).
I need to keep state of this array same as it is I just need to update one object property.
Example of array:
5678: {OrderId: 1, Title: "Example 1", Users: [{UserId: 1}, {UserId: 2}, {UserId: 3}]}
5679: {OrderId: 2, Title: "Example 2", Users: [{UserId: 1}, {UserId: 2}, {UserId: 3}]}
I need to update Users array property.
I tried this but it doesn't work:
ordersAssociativeArray: {
...state.ordersAssociativeArray,
[action.key]: {
...state.ordersAssociativeArray[action.key],
Users: action.updatedUsers
}
}
This is data inside reducer.
What I did wrong how to fix this?
Something that might help.
When I inspect values in chrome I check previous value and value after execution of my code above:
Before:
ordersAssociativeArray:Array(22) > 5678: Order {OrderId: ...}
After:
ordersAssociativeArray: > 5678: {OrderId: ...}
Solution (code in my reducer)
let temp = Object.assign([], state.ordersAssociativeArray);
temp[action.key].Users = action.updatedUsers;
return {
...state,
ordersAssociativeArray: temp
}
So this code is working fine.
But I still don't understand why? So I have solution but would like if someone can explain me why this way is working and first not?
If it could help here how I put objects in this associative array initialy:
ordersAssociativeArray[someID] = someObject // this object is created by 'new Order(par1, par2 etc.)'
What you are doing is correct, as demonstrated by this fiddle. There may be problem somewhere else in your code.
Something that I would recommend for you is to separate your reducer into two functions, ordersReducer and orderReducer. This way you will avoid the excessive use of dots, which may be what caused you to doubt the correctness of your code.
For example, something like:
const ordersReducer = (state, action) => {
const order = state[action.key]
return {
...state,
[action.key]: orderReducer(order, action)
}
}
const orderReducer = (state, action) => {
return {
...state,
Users: action.updatedUsers
}
}
I hope you find your bug!
Update
In your solution you use let temp = Object.assign([], state.ordersAssociativeArray);. This is fine, but I thought you should know that it is sometimes preferable to use a {} even when you are indexing by numbers.
Arrays in javascript aren't great for representing normalized data, because if an id is missing the js array will still have an undefined entry at that index. For example,
const orders = []
array[5000] = 1 // now my array has 4999 undefined entries
If you use an object with integer keys, on the other hand, you get nice tightly packed entries.
const orders = {}
orders[5000] = 1 // { 5000: 1 } no undefined entries
Here is an article about normalizing state shape in redux. Notice how they migrate from using an array in the original example, to an object with keys like users1.
The problem can be that you're using array in the state but in the reducer you're putting as object. Try doing:
ordersAssociativeArray: [ //an array and not an object
...state.ordersAssociativeArray,
[action.key]: {
...state.ordersAssociativeArray[action.key],
Users: action.updatedUsers
}
]
It will put ordersAssociative array in your state and not an object.
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"}
]
*/