How should one structure Redux state when retrieving domain objects that have different search parameters.
In my application I display a list of organisations that the user filters, in a table. On the same page I will also display a smaller list of organisations that a user is part of, and perhaps in the future another small list on the same page that displays only organisations from another user.
Do i do this:
{
list_organisations: [
{ id: 1, name: 'foo1' //... },
{ id: 2, name: 'foo2' //... },
{ id: 3, name: 'foo3' //... },
{ id: 4, name: 'foo4' //... },
{ id: 5, name: 'foo5' //... },
],
user_one_organisations: [
{ id: 6, name: 'foo' //... },
{ id: 2, name: 'foo' //... },
],
user_two_organisations: [
{ id: 4, name: 'foo' //... },
{ id: 6, name: 'foo' //... },
],
}
or this:
{
users: [
{ id: 1, organisations: [7,3,8], name: 'billy' },
{ id: 2, organisations: [3,6,1], name: 'sam' },
]
organisations: [
{ id: 1, name: 'foo', //... },
{ id: 2, name: 'foo1', //... },
{ id: 3, name: 'foo2', //... },
{ id: 4, name: 'foo3', //... },
{ id: 5, name: 'foo4', //... },
{ id: 6, name: 'foo5', //... },
{ id: 7, name: 'foo6', //... },
{ id: 8, name: 'foo7', //... },
{ id: 9, name: 'foo8', //... },
],
}
If we go with option two, what do we do in the case that we need to lookup a single organisation for some purpose e.g. "check if a users email exists within an organisation" -- it all just seems so complex... especially when doing one off requests? should that even live in the redux state?
That would make it like so:
{
users: [
{ id: 1, organisations: [7,3,8], name: 'billy' },
{ id: 2, organisations: [3,6,1], name: 'sam' },
]
organisation_signup_form: {
doesUsersEmailExist: true / false / null,
}
organisations: [
{ id: 1, name: 'foo', //... },
{ id: 2, name: 'foo1', //... },
{ id: 3, name: 'foo2', //... },
{ id: 4, name: 'foo3', //... },
// ...
],
}
I'd actually recommend structuring your data in a completely different way. You want to make sure that all of your models are easy to get at so keeping them in an array can be tricky.
I'd suggest a state structure something like this:
users: {
1: { id: 1, organisations: [7,3,8], name: 'billy' },
2: { id: 2, organisations: [3,6,1], name: 'sam' },
},
userList: [1,2],
organisation_signup_form: {
doesUsersEmailExist: true / false / null,
},
organisations: {
1: { id: 1, name: 'foo', //... },
2: { id: 2, name: 'foo1', //... },
3: { id: 3, name: 'foo2', //... }
}
I got this advice from Dan on this question
check if a users email exists within an organisation
You don't have an email on the user model and it's not clear so it's quite difficult to answer that specific question.
One bit of advice I'd give is that you need to structure your state in a database kind of way but it doesn't have to be the same structure as your actual database or api endpoints.
Related
states = [{
name: telangana,
cities: [{
id: 1,
name: foo
}, {
id: 2,
name: joo
}, {
id: 3,
name: goo
}]
},
{
name: punjab,
cities: [{
id: 4,
name: tyu
}, {
id: 5,
name: ery
}, {
id: 6,
name: doo
}]
},
{
name: mumbai,
cities: [{
id: 7,
name: eee
}, {
id: 8,
name: qqq
}, {
id: 9,
name: www
}]
},
]
I want response like [foo, joo, goo, tyu, ery,doo, eee,qqq,www]
Can someone help me ?
Just write one line:
Learn more about reduce() and map()
const states = [{ name: "telangana", cities: [{ id: 1, name: "foo" }, { id: 2, name: "joo" }, { id: 3, name: "goo" }] }, { name: "punjab", cities: [{ id: 4, name: "tyu" }, { id: 5, name: "ery" }, { id: 6, name: "doo" }] }, { name: "mumbai", cities: [{ id: 7, name: "eee" }, { id: 8, name: "qqq" }, { id: 9, name: "www" }] }, ];
const result = states.reduce((acc, { cities }) => [...acc, ...cities.map(({ name }) => name)], []);
console.log(result);
const getNames = (data) => {
const nameArr = [];
data.forEach((ele) => {
ele.cities.forEach((ele2) => {
nameArr.push(ele2.name);
})
})
return nameArr;
}
getNames(states);
Try this please!
states = [{
name: "telangana",
cities: [{
id: 1,
name: "foo"
}, {
id: 2,
name: "joo"
}, {
id: 3,
name: "goo"
}]
},
{
name: "punjab",
cities: [{
id: 4,
name: "tyu"
}, {
id: 5,
name: "ery"
}, {
id: 6,
name: "doo"
}]
},
{
name: "mumbai",
cities: [{
id: 7,
name: "eee"
}, {
id: 8,
name: "qqq"
}, {
id: 9,
name: "www"
}]
},
]
const wantedArray = []
for(i=0; i < states.length; i++){
for(j=0; j < states[i].cities.length; j++){
wantedArray.push(states[i].cities[j].name)
}
}
console.log(wantedArray)
Just give it an empty array, then you loop through the states indexes, each index in states will have a cities array, then you just need to loop it again in that array to get each name of the cities. From then, you are using the push method that Javascript provides to push it to the empty array.
Here's how I'm doing it in JSFiddle, there will have a better way to do this, too.
so the code is not complete it is just a list but the error tells me to add ";" at the end of the sentence but that isn't all of it so I'm just gonna upload the original without any edits and pls just let me why there are so many errors. (don't know if I added the code correctly here)
let lists = [
{
id: 1,
name: "giorgi",
company: [
{
id: 1,
address: "kutaisi"
},
{
id: 2,
address: "wyaltubo"
}
]
},
{
id: 2,
name: "giorgi",
company: [
{
id: 1,
address: "batumi"
},
{
id: 2,
address: "ureki"
}
]
},
{
id: 3,
name: "giorgi",
company: [
{
id: 1,
address: "tbilisi"
},
{
id: 2,
address: "zugdidi"
}
]
i think you missed }] at the end of the code (not sure if thats your problem) try out this
let lists = [
{
id: 1,
name: "giorgi",
company: [
{
id: 1,
address: "kutaisi"
},
{
id: 2,
address: "wyaltubo"
}
]
},
{
id: 2,
name: "giorgi",
company: [
{
id: 1,
address: "batumi"
},
{
id: 2,
address: "ureki"
}
]
},
{
id: 3,
name: "giorgi",
company: [
{
id: 1,
address: "tbilisi"
},
{
id: 2,
address: "zugdidi"
}
]}]
Your object is incomplete, you missed some Brackets, Try this code
let lists = [
{
id: 1,
name: "giorgi",
company: [
{
id: 1,
address: "kutaisi"
},
{
id: 2,
address: "wyaltubo"
}
]
},
{
id: 2,
name: "giorgi",
company: [
{
id: 1,
address: "batumi"
},
{
id: 2,
address: "ureki"
}
]
},
{
id: 3,
name: "giorgi",
company: [
{
id: 1,
address: "tbilisi"
},
{
id: 2,
address: "zugdidi"
}
]
}
]
If that is the hall code you are missing } ] at the end.
try it out and let us know.
I have an array of Objects
const options = [
{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
I am trying to write a function that will assign new properties to the object.
The output I am looking for is:
const options = [
{ value: 1, label: "Back Pain" },
{ value: 2, label: "Body aches" },
{ value: 3, label: "Cold Sores" },
{ value: 4, label: "Cough" },
{ value: 5, label: "Constipation" },
];
I have tried to loop through the array using a for loop, but can not figure it out.
Thanks for the help:)
You can do it like this:
const data=[{ id: 1, name: "Back Pain" },
{ id: 2, name: "Body aches" },
{ id: 3, name: "Cold Sores" },
{ id: 4, name: "Cough" },
{ id: 5, name: "Constipation" },
];
var result = data.map(({id:value, name:label})=>({value, label}));
console.log(result);
I have an array like that:
[{
id: 1,
name: 'Proposal'
},
{
id: 2,
name: 'Contract',
children: [
{
name: 'Approval',
component: '/approval'
},
{
name: 'Cancellation',
component: '/cancellation'
}
]
}]
and another like that:
[{
id: 1,
name: 'Proposal'
},
{
id: 2,
name: 'Contract',
children: [
{
name: 'Approval',
component: '/approval'
}
]
},
{
id: 3,
name: 'Example'
}]
My question is how is the best way to filter arrays, and remove one if have duplicated or more, even in array of children. Or the best, is like arrays merge!
I'm currently working with an array of javascript objects with X-amount of array's with the same type of object inside it, in a specific property (in this case, 'modelChildren')
I would like to flatten this into just one array of objects, and return the level at which it was found. The solution does not have to be plain javascript, as I use lodash for many situations. Ideally I would also like to remove the 'modelChildren' field once finished.
Any help would be appreciated.
Thanks!
input:
[{
id: 1,
name: foo
modelChildren: [
{
id: 2,
name: bar,
modelChildren: [
{
id: 3,
name: foobar
},
{
id: 4,
name: foobarfoo
}
]
}
]
}]
expected result:
[{
id: 1,
name: foo,
level: 1
{
id: 2,
name: bar,
level: 2
},
{
id: 3,
name: foobar,
level: 3
},
{
id: 4,
name: foobarfoo
level: 3
}]
This can be quite easy, it is just Tree Traversal
So you just need to traverse it and remember the level, while storing "nodes" when you are in them.
For example this code
const source = [{
id: 1,
name: 'foo',
modelChildren: [
{
id: 2,
name: 'bar',
modelChildren: [
{
id: 3,
name: 'foobar'
},
{
id: 4,
name: 'foobarfoo'
}
]
}
],
}, {
id: 5,
name: 'foo',
modelChildren: [
{
id: 6,
name: 'bar',
modelChildren: [
{
id: 7,
name: 'foobar'
},
{
id: 8,
name: 'foobarfoo'
}
]
},
{
id: 9,
name: 'bar',
modelChildren: [
{
id: 10,
name: 'foobar'
},
{
id: 11,
name: 'foobarfoo'
}
]
}
],
}
];
const newSource = [];
const _ = require('lodash');
function doIt(items, level) {
if (!items) {
return;
}
items.forEach(item => {
newSource.push(_.merge({level}, _.pick(item, ['id', 'name'])));
doIt(item.modelChildren, level + 1);
})
}
doIt(source, 1);
console.log(newSource);
Having this output
[ { level: 1, id: 1, name: 'foo' },
{ level: 2, id: 2, name: 'bar' },
{ level: 3, id: 3, name: 'foobar' },
{ level: 3, id: 4, name: 'foobarfoo' },
{ level: 1, id: 5, name: 'foo' },
{ level: 2, id: 6, name: 'bar' },
{ level: 3, id: 7, name: 'foobar' },
{ level: 3, id: 8, name: 'foobarfoo' },
{ level: 2, id: 9, name: 'bar' },
{ level: 3, id: 10, name: 'foobar' },
{ level: 3, id: 11, name: 'foobarfoo' } ]