I'm calling a get service in componentWillMount(). Service response me a object in the form of JSON I which mentioned below. But I need the values of service objects into my variables/objects so I made a loop when I'm getting the data from service and it works fine but the issue is that it takes too much time to pass the data into my objects/variables. It take at least 45 to 50 seconds to pass the service data into my objects. If I removed the loop so service respond me perfectly but I need the values of service into my objects. Please provide me the best solution for it. Thanks
Service JSON Response
{
"Capital": 0,
"Code": "BOL",
"Code2": "",
"Continent": "",
"GNP": 0,
"Name": "Bolivia",
}
I need the Code into key variable and Name into label variable
axios.get('http://apiurl.com/api/user/GetCountries')
.then((response) => {
for (var i = 0; i < response.data.length; i++) {
var joined = this.state.countriesModel.concat({ key: response.data[i].Code, label: response.data[i].Name });
this.setState({ countriesModel: joined });
}
this.hideLoader();
}).catch((err) => {
console.log(err)
});
I made array outside state and it works perfectly. setState is taking too much time to set the data.
countiesOptions = [];
componentDidMount(){
var joined = this.countiesOptions.concat({ key: response.data[i].Code, label: response.data[i].Name });
this.countiesOptions = joined;
}
Related
I got a schema looking something like this:
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
//Create Schema
const PhoneNumbersSchema = new Schema({
phone_numbers: {
phone_number: 072382838232
code: ""
used: false
},
});
module.exports = PhoneNumbers = mongoose.model(
"phonenumbers",
PhoneNumbersSchema
);
And then I got an end-point that gets called from a 3rd party application that looks like this:
let result = await PhoneNumbers.findOneAndUpdate(
{ country_name: phoneNumberCountry },
{ $set: {"phone_numbers.$[elem1].services.$[elem2].sms_code": 393} },
{ arrayFilters: [ { "elem1.phone_number": simNumberUsed }, { "elem2.service_name": "steam" } ] },
Basically the end-point updates the "code" from the phone numbers in the database.
In react this is how I retrieve my phone numbers from the state:
const phonenumbers_database = useSelector((state) => {
console.log(state);
return state.phonenumbers ? state.phonenumbers.phone_numbers_details : [];
});
Every time the code gets changed in my database from the API call I would like to update "phonenumbers_database" in my state automatically.
How would I be able to do that?
MongoDB can actually watch for changes to a collection or a DB by opening a Change Stream.
First, you would open up a WebSocket from your React app to the server using something like Socket.io, and then watch for changes on your model:
PhoneNumbers
.watch()
.on('change', data => socket.emit('phoneNumberUpdated', data));
Your third party app will make the changes to the database to your API, and then the changes will be automatically pushed back to the client.
You could do a polling and check the Database every N secs or by using change streams
After that, to notify your frontend app, you need to use WebSockets, check on Socket IO
I am trying to push a newly created object to an array. The array is defined as
clientengagements: []
The Object is
engagement: []
So I am using a v-for to iterate through each engagement belonging to a client in my clientengagements array. Everything works fine until I submit a new engagement. It changes my clientengagements: [] array to only show the new object. Now if i refresh the page, the clientengagements: [] will go back to the array with the newly added object plus the other objects that already existed which is what I want it to do..
This is the AddEngagement component script that I use to dispatch to the store
methods: {
...mapActions(['addEngagement']),
addNewEngagement() {
if(!this.engagement.return_type || !this.engagement.year ) return;
this.addEngagement({
id: this.idForEngagement,
client_id: this.client.id,
return_type: this.engagement.return_type,
year: this.engagement.year,
assigned_to: this.engagement.assigned_to,
status: this.engagement.status,
})
.then(() => {
this.engagement = ""
this.idForEngagement++
this.$router.go(-1);
})
},
},
The action in the store is defined like below
addEngagement(context, engagement) {
axios.post(('/engagements'), {
client_id: engagement.client_id,
return_type: engagement.return_type,
year: engagement.year,
assigned_to: engagement.assigned_to,
status: engagement.status,
done: false
})
.then(response => {
context.commit('getClientEngagements', response.data)
})
.catch(error => {
console.log(error)
})
},
from there it should commit to the getClientEngagements() mutation which is where I believe I am running into my issue but I have not figured out how to resolve. Here is the code
getClientEngagements(state, clientengagements) {
state.clientengagements = clientengagements;
},
I have been recommended to use Vue.set() but I do not know how to apply it.. any help would be greatly appreciated!!!
So I have set the mutation getClientEngagements to use this now
getClientEngagements(state, engagement) {
state.clientengagements.push(engagement)
},
But by changing the mutation to this it has placed the already existing objects into a deeper nested array. see below
So the response.data for the new engagement only sends back from the backend that newly added engagement on the addEngagement action. is this a problem?
Thanks for all the help, but I actually ended up needing to add a extra mutation and use that as the commit, because I am defining to seperate lists of engagements. One for the client and one for all clients. here is the new mutation
addClientEngagement(state, engagement) {
state.clientengagements.push(engagement)
},
which I then use in my action here
addEngagement(context, engagement) {
axios.post(('/engagements'), {
client_id: engagement.client_id,
return_type: engagement.return_type,
year: engagement.year,
assigned_to: engagement.assigned_to,
status: engagement.status,
done: false
})
.then(response => {
context.commit('addClientEngagement', response.data)
})
.catch(error => {
console.log(error)
})
},
and then this mutation happens
getClientEngagements(state, clientengagements) {
state.clientengagements = clientengagements
},
Previously it was using this mutation to add the engagement to the array which was why it was replacing the array with the new object. see below for old mutation
addEngagement(state, engagement) {
state.engagements.push ({
id: engagement.id,
client_id: engagement.client_id,
return_type: engagement.return_type,
year: engagement.year,
assigned_to: engagement.assigned_to,
status: engagement.status,
done: false
})
},
Hopefully I am making sense in my explanation
.then(response => {
...// data transaction
context.commit('getClientEngagements', response.data)
})
Maybe you can do with the response data at first and then store it after that.
If the response data is an object, and you only want to store the value,
you can do something similar to this:
for( p in object ){
context.commit('getClientEngagements', object[p])
}
If the response data is an array, then you can try to use for to get the value you want and then push in the state.
You should do the transaction of data according to your needs at first for your case.
EDIT: Since I wasn't able to find a correct solution, I changed the
application's structure a bit and posted another question:
Mongoose - find documents not in a list
I have a MEAN app with three models: User, Task, and for keeping track of which task is assigned to which user I have UserTask, which looks like this:
const mongoose = require("mongoose");
const autopopulate = require("mongoose-autopopulate");
const UserTaskSchema = mongoose.Schema({
completed: { type: Boolean, default: false },
userId: {
type: mongoose.Schema.Types.ObjectId,
ref: "User",
autopopulate: true
},
taskId: {
type: mongoose.Schema.Types.ObjectId,
ref: "Task",
autopopulate: true
}
});
UserTaskSchema.plugin(autopopulate);
module.exports = mongoose.model("UserTask", UserTaskSchema);
In my frontend app I have AngularJS services and I already have functions for getting all users, all tasks, and tasks which are assigned to a particular user (by getting all UserTasks with given userId. For example:
// user-task.service.js
function getAllUserTasksForUser(userId) {
return $http
.get("http://localhost:3333/userTasks/byUserId/" + userId)
.then(function(response) {
return response.data;
});
}
// task-service.js
function getAllTasks() {
return $http.get("http://localhost:3333/tasks").then(function(response) {
return response.data;
});
}
Then I'm using this data in my controllers like this:
userTaskService
.getAllUserTasksForUser($routeParams.id)
.then(data => (vm.userTasks = data));
...and because of autopopulate plugin I have complete User and Task objects inside the UserTasks that I get. So far, so good.
Now I need to get all Tasks which are not assigned to a particular User. I guess I should first get all Tasks, then all UserTasks for a given userId, and then make some kind of difference, with some "where-not-in" kind of filter.
I'm still a newbie for all the MEAN components, I'm not familiar with all those then()s and promises and stuff... and I'm really not sure how to do this. I tried using multiple then()s but with no success. Can anyone give me a hint?
You can do at server/API side that will more efficient.
In client side, if you want to do then try below
var userid = $routeParams.id;
userTaskService
.getAllTasks()
.then((data) => {
vm.userTasks = data.filter(task => task.userId !== userid)
});
I have no idea how i can pass an array of object in Restangular. I've read their documentation. I found that they provided such as customGET, customPOST etc. But, i didn't see the right example that related to my case. For now, i want it to get data from an API that needs params as its filter.
1) Params
var filter = {
category: 1,
page: 1,
product: 20,
price_range: ['bt',1,150]
}
2) Services
getRawList: function(filter) {
return rawProducts.customGET('',filter).then(function(response) {
return response;
});
},
What i got was an Internal Server Error. Any idea how to tackle this error ?
When sending data to a web server, the data has to be a string. So, on this situation i need to convert the array property to string (which is price_range) before send it to the server as filter. This code solved my question.
getRawList: function(filter) {
return rawProducts.customGET('',{
category: filter.category,
page: filter.page,
product: filter.product,
price_range: JSON.stringify(filter.price_range)
}).then(function(response) {
return response;
});
}
How can I post an array of Schema.Types.ObjectId (s) to MongoDB? I'm trying to create User Groups, which is a group of the 'User' Model e.g.
var UserGroup = new Schema({
users: [{
type: Schema.Types.ObjectId,
ref: 'User'
}]
});
New UserGroup Function
module.exports.create = function(request, response) {
var group = new UserGroup({
users = request.body.users
});
group.save(function(error) {
if(error) { throw error; } else { response.send('Group Created Successfully.');
});
};
I'm currently using Postman to test the functionality, how exactly should the data be posted?
As a Javascript array i.e ['A_USER_ID', 'A_USER_ID'] ?
Thanks!
#Answer
I was using the older syntax of the select() function, and therefore was passing invalid parameters to the $push function. When sending the request, I simply pass the ObjectIds as id,id,id and once they get to the server, simply put it into an array using var my_array = request.body.users.split(','); and then push it to the database using the following:
$push: { users: { $each: my_array } }
I hope this was helpful, the documentation isn't particularly clear on this matter.