Selected item in createApi generated reducer - javascript

Currently, I have successfully built a redux-toolkit api using following code:
const api = createApi({
reducerPath: 'api',
baseQuery: baseQueryWithReauth,
endpoints: (builder) => ({
getClusters: builder.query({
query: ROUTES.CLUSTERS,
}),
}),
})
The data Im receiving from backend looks like this:
[
{
"name": "test 1",
"description": "test 1",
"id": 1
},
{
"name": "test 2",
"description": "test 2",
"id": 2
}
]
The user should be able to select one of these items through the interface, and the selection should be saved at redux. Something like:
{
"data": [
{
"name": "test 1",
"description": "test 1",
"id": 1
},
{
"name": "test 2",
"description": "test 2",
"id": 2
}
],
"selectedItem": 1 // Saved selected item id in redux so I can use it globally!
}
I have tried using createEntityAdapter and adding the selectId adapter, but seems not supported (I dont even know if its the correct approach). Is there any way to do it using redux-toolkit capabilities?

Related

react js :fetch data from inner array and load it to state

i have a api with peoples i am tring to dispaly names of people
"peoples": [
{
"id": 2,
"mainModule": "bonding",
"description": "some random description 2",
"persons": [
{
"id": 3,
"name": "hari",
"completed": false
},
{
"id": 4,
"name": "meenu",
"completed": false
}
]
"id": 1,
"mainModule": "bonding2",
"description": "some random description 2",
"persons": [
{
"id": 3,
"name": "jisa",
"completed": false
},
{
"id": 4,
"name": "stepy",
"completed": false
}
]
},
]
This is my data in api
I am using axios to set a state called items
axios
.get(
"url",
config
)
.then((res) => {
console.log(res.data.peoples)//this works
console.log(res.data.peoples.persons);//here i am getting error
this.setState({ items: res.data.peoples.persons}); error
}
I am trying to pass persons so I can map person names in JSX
i have changed the code pls help
Welcome to StackOverflow! As you can see in your first snippet you have an array inside peoples so the correct way to access it would be:
res.data.peoples[0].persons
Hope this solves your problem. You can read more about it in MDN docs
edit:
If you would like to iterate over persons you can do this:
res.data.peoples.map(person => (
<div key={person.id}>{person.name}</div>
));
Remember you must pass a unique key prop to the component so React can create and mantain the list correctly. More info about it in the Docs.
res.data.peoples is an array so you should iterate over it. It doesn't have persons property, it has [0], [1] etc. Try to log res.data.peoples[0].persons
From the sample data you showed, peoples is an array. So to access persons, you should be able to access it using the following, for example if you want to access the first element of the array:
res.data.peoples[0].persons
Otherwise, if you want to access it as res.data.peoples.persons then you have to change your API output such that it is like so :
"peoples": {
"id": 2,
"mainModule": "bonding",
"description": "some random description 2",
"persons": [
{
"id": 3,
"name": "hari",
"completed": false
},
{
"id": 4,
"name": "meenu",
"completed": false
}
]
}

Axios post method refreshes the page

So I got this problem whenever I post something in my database on localhost with Axios, the page gets refreshed automatically. Searched the internet for the same problem, but didn't really find anything, everything was on the HTML form things and I don't really have a form on my page.
codepen: https://codepen.io/shotaivanidze/pen/PooLNPZ
Here is a JSON database
{
"tags": [
{
"title": "test 1",
"id": 1
},
{
"title": "test 2",
"id": 2
},
{
"title": "test 3",
"id": 3
},
{
"title": "test 4",
"id": 4
},
{
"title": "test 5",
"id": 5
},
{
"title": "test 6",
"id": 6
},
{
"title": "test 7",
"id": 7
}
]
}

How to append object to external JSON file using JavaScript native (Vanilla Js)

Is there any method to add object to external JSON file using JavaScript ?
I have a JSON file named datas.json has content like this:
{
"Employes":[
{
"id": 1,
"fullName": "Test Test"
}
],
"Infos":[
{
"id": 1,
"address": "Test Test test test test",
"employes": 1
}
]
}
I try to do it, I can push to the current array, but on file I was blocked.
function pushJSONFile(){
fetchJSONFile(function(data){
console.log(data.Employes);
data.Employes.push({
"id": 2,
"fullName": "Test Test 2"
});
jsonStr = JSON.stringify(data.Employes);
});
}
So, is there any method to push new object to this JSON file using native JavaScript (Vanilla JS)?
For more explain, I want when I push this new object :
data.Employes.push({
"id": 2,
"fullName": "Test Test 2"
});
If I open my datas.json file will be like this :
{
"Employes":[
{
"id": 1,
"fullName": "Test Test"
},
{
"id": 2,
"fullName": "Test Test 2"
}
],
"Infos":[
{
"id": 1,
"address": "Test Test test test test",
"employes": 1
}
]
}

Ember Data belongsTo Association (JSON format?)

I have two models 'Author' and 'Publisher' (Rails), with a publisher hasOne author / author belongsTo publisher relationship.
I have the Ember models setup correctly -- JS Fiddle -- and the associations working when I manually push into the store. But only the publisher records are created when requesting /publishers index.
I've tried several types of JSON responses:
Publishers with author
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author": 1
}
],
"author": {
"id": 1,
"name": "Test A 1",
"publisher": 1
}
}
Publishers with authors
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author": 1
}
],
"authors": [{
"id": 1,
"name": "Test A 1",
"publisher": 1
}]
}
Publishers with author embedded
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author": {
"id": 1
"name": "Test A 1"
}
}
]
}
Thanks for any help!
The ActiveModelAdapter/ActiveModelSerializer expects _id/_ids to be appended on relationships
{
"publishers": [
{
"id": 1,
"name": "Test P 1",
"author_id": 1
}
],
"authors": [{
"id": 1,
"name": "Test A 1",
"publisher_id": 1
}]
}
http://jsfiddle.net/6Z2AL/1/
Adding a link to ember-data issue in case it helps anyone -- single object push payload

How can I add and remove to / from a nested mongodb collection in Node.js?

I would like to add and remove "developers" in to the following mongodb collection. There can be many projects, each project can have many user stories, and each user story can have multiple developers working on it.
Question:
What mongodb query can I use to add new developers to the "stories" collection, and what mongodb query can I use to remove developers from the "stories" collection?
JSON for a Project:
{
"_id": ObjectId("4ef0a2bac8c056bc26000002"),
"chat": {
"0": {
"body": "Test",
"sender": "brownj2",
"sent": 1324404459137
}
},
"clients": {
"0": {
"username": "b"
}
},
"owner": "brownj2",
"stories": {
"0": {
"_id": "U89Tq7X8BF2qaBfFzfE99lkb",
"deadline": "10\/10\/2010",
"description": "Example user story",
"developers": {
/* Developers go here */
},
"lane": "2",
"roi": "0.38",
"sp": "8",
"title": "Test #2",
"type": "story",
"value": "3"
},
"1": {
"_id": "EdbzrnoZTh8LTFDNrUSBkVrd",
"deadline": "10\/10\/2010",
"description": ".....",
"developers": {
/* Developers go here */
},
"lane": "0",
"roi": "1.00",
"sp": "4",
"title": "Test #1",
"type": "story",
"value": "4"
}
},
"team": {
"0": {
"username": "a"
}
},
"title": "Example Project"
}
You have inconsistent design. Some of your collections are arrays, others are hashes.
I tend to use hashes more, but then I don't use plain 'numeric' indexes for items. For example:
"stories": {
"0": {
"_id": "U89Tq7X8BF2qaBfFzfE99lkb",
"deadline": "10\/10\/2010",
would make more sense (to me) if it was written as
"stories": {
"U89Tq7X8BF2qaBfFzfE99lkb": {
"deadline": "10\/10\/2010",
The same goes for developers. I suppose they have IDs, right? So it should be
"developers": {
dev1_id : {username : username1},
dev2_id : {username : username2}
}
Now you can manage these objects with plain dotted sets
Add new developer
db.projects.update({_id: ObjectId("4ef0a2bac8c056bc26000002")},
{$set: {"stories.U89Tq7X8BF2qaBfFzfE99lkb.dev3_id" : username3})
Pull a developer
db.projects.update({_id: ObjectId("4ef0a2bac8c056bc26000002")},
{$unset: {"stories.U89Tq7X8BF2qaBfFzfE99lkb.dev1_id" : 1})
Ok it's a bit of a workaround, but it seems to work quite well. I'm doing some of the work on the server, rather than the database.
projects.findOne({_id : projectId}, function(err, project)
{
for(var i = 0; i < project.stories.length; i++)
{
if(project.stories[i]._id == storyId)
{
var developers = project.stories[i].developers;
var size = developers.length;
var developers[size] = {username : username};
projects.update( {"stories._id" : storyId},
{$set:
{
"stories.$.developers" : developers
}
}, false, true);
}
}
}

Categories

Resources