I have an array of objects like
[
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
},
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
},
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
},
{
"id":17368,
"creationDate":1566802693000,
"status":"InProgress",
"type":"NEW",
"agentType":"Master"
}
]
But when trying to access the object property 'id' using console.log(array[0].id) throws a "cannot read property id of undefined error"
However just logging the first object with console.log(array[0]) prints the object successfully.
{id: 17368, creationDate: 1566802693000, …}
Also printing the list of ids using array.map(x => console.log(x.id)) prints the list of ids successfully .
I am in a situation where i need to access the first few specifically . Where am i going wrong ?
try this console.log(array[0] && array[0].id)
or you can use get from lodash-es like this:
import { get } from 'lodash-es'
const id=get(array[0], 'id', '')
Related
I have a read-only object that is returned by GraphQL (vue-apollo) query, the result which is read-only looks something like this:
result: {
id: 'yh383hjjf',
regulations: [{ title: 'Test', approved: false}]
})
I want to bind this to a form and be able to edit/update the values in the regulations array and save it back to the database.
at the moment when I try to edit I get the error below:
Uncaught TypeError: "title" is read-only
I tried cloning the result returned by the database using object.assign
//target template
const regulatoryApprovals = {
id: null,
regulations: [{ title: null, approved: null}]
})
regulatoryApprovals = Object.assign(regulatoryApprovals, result, {
regulations: Object.assign(regulatoryApprovals.regulations, result.regulations)
})
but this didn't work.
Does anyone know how I can properly clone the result?
regulatoryApprovals= Object.assign(regulatoryApprovals, ... indicates the problem because regulatoryApprovals is modified with Object.assign, so it would need no assignment.
Read-only regulatoryApprovals object needs to be cloned. regulations is an array and won't be merged correctly with Object.assign, unless it's known that array elements need to be replaced. It should be:
regulatoryApprovals = {
...regulatoryApprovals,
...result,
regulations: [...regulatoryApprovals.regulations, result.regulations]
}
Where { ...regulatoryApprovals, ... } is a shortcut for Object.assign({}, regulatoryApprovals, ...).
I'm trying to figure out how to use react-hook-forms with field arrays. I have the form working (this code sandbox is where im testing changes to make this work: https://codesandbox.io/s/react-hook-form-custom-input-7cdoh), but am now trying to figure out how to render the data.
I can log a json packet as:
"ethics": {
"0": {
"explain": "df",
"managementPlan": "sdf"
},
"1": {
"explain": "sdf",
"managementPlan": ""
},
"value": "informedconsent",
"label": "Informed consent"
}
Then, in my display, I'm trying to loop through each array as follows:
{state.data.ethics.each.map(ethics => <Tag color="magenta">{ethics.label}</Tag>)}
This doesn't work - the error message says:
TypeError: Cannot read property 'map' of undefined
What do I need to do to present the output?
As mentioned earlier, you have a ethics object and not array.
object.keys(state.data.ethics).map(k=>{
const obj = state.data.ethics[key];
/* your obj will look like below
{
"explain": "df",
"managementPlan": "sdf"
}
*/
// Do Whatever you want to do with obj now
return (<>
<div>{obj.explain}</div>
<div>{obj.managementPlan}</div>
</>)
});
I want to create rootStore which contains others store. The problem is that the children contain properties like:
id: types.identifier(types.string),
And when I create the rootStore, I get an error from the child:
[mobx-state-tree] Error while converting {} to SomeModelStore: at path "/id" value undefined is not assignable to type: identifier(string) (Value is not a string), expected an instance of identifier(string) or a snapshot like identifier(string) instead.
I tried to use types.late but it did not help.
The solution I found is to wrap all properties into types.maybe
Examples:
error:
https://codesandbox.io/s/yvnznxyvyj?module=%2Fmodels%2FSomeModelStore.js
workaround:
https://codesandbox.io/s/0mv558yq50?module=%2Fmodels%2FSomeModelStore.js
Here https://codesandbox.io/s/yvnznxyvyj?module=%2Fmodels%2FSomeModelStore.js you create an empty object
.model("FirstStore", {
item: types.optional(SomeModelStore, {})
})
but type
SomeModelStore
didn't support empty fields. If you write like this
export const FirstStore = types
.model("FirstStore", {
item: types.optional(SomeModelStore, {
id: 'defaultId',
activate: false,
name: 'defaultName'
})
})
it will work. Or you can use "types.maybe" instead of "types.optional".
export const FirstStore = types
.model("FirstStore", {item: types.maybe(SomeModelStore)})
Also read about types.reference
I think it's a better way to use it in your case.
My code is like this :
<script>
export default {
props:['search','category','shop'],
created(){
...
},
data(){
return{
loading:false
}
},
computed:{
...
list:function(){
console.log(this.$store.state.product);
return this.$store.state.product.list
},
},
methods:{
...
}
}
</script>
I do : console.log(this.$store.state.product); in list method
Then, I check it on the console
The result is like this :
I want display value of name
I try like this :
console.log(this.$store.state.product.list.id.name);
There exist error :
Uncaught TypeError: Cannot read property 'name' of undefined
How can I solve the error?
The list is an object, with the keys being the different element id's - you are currently trying to access like this:
this.$store.state.product.list.id.name
You are getting that error because there is no id key in the list object, you need to replace .id with the actual id value, like this:
this.$store.state.product.list["12"].name; //"Bunga Gandeng"
while pushing an element for the first time to a child array which is null,I'm getting this error
"Cannot read property push of null"
But the element gets pushed,and the second time I do everything goes fine.It gets added to the array
this.group.departmentsList.push({
name: group.newCategoryName,
sortOrder: group.departmentsList.length,
type: "category"
});
group contains the data and departmentList is the child array which is declared like this:
$scope.parentDepartment = [
{
departmentsList: [{}]
}
];
Well don't push to nonexistent array maybe? You can explicitly check if it's not null and create one if needed:
this.group.departmentsList = this.group.departmentsList || [];
this.group.departmentsList.push({
name: group.newCategoryName,
sortOrder: group.departmentsList.length,
type: "category"
});