I have a list, and I need to delete an element to be deleted.
The delete button works in that it sends the delete request to the server. However, a page refresh is needed to have it delete from the front end.
I want it deleted after the delete button is clicked.
I could simply set a boolean on the front end as follows:
render && <ComponentToDelete />
and change render from true to false.
Is this the preferred way or is there a best practice or more standard way.
I'm simply doing a delete on an item as part of CRUD operations.
I'm not sure if this is relevant:
https://reactjs.org/docs/react-dom.html#unmountcomponentatnode
Also, per comment here is how the list is generated:
let render;
if(new_articles.length > 1){
render = new_articles.map((val, index) => {
return <ComponentArticle key={index} data={val}/>;
});
}
return render;
google search here
As in example above, you just need to remove item from new_articles. Let's say the deleted id is deleted_id, You can remove that item from array by trying the following snippet
new_articles.filter((article) => article_id !== deleted_id);
You should be using new_articles array as state value.
If you make any change to the array, render will update UI automatically.
So after you send delete request to server and get successful response, you can change the new_articles array to reflect the deleting.
You can use one of Javascript functions like fliter or splice with deleted index.
Related
Document:
{
reportId:6dgda82,
items:[],
}
I fetched the document using db.collection.findOne() and used document.items.push() to insert a new value and used document.save(),this was updated in the database.
But when i want to delete an item , deleted the item using javscript and used document.save() but the database is not updating.
Why ??
EDIT : I came to know about the $pull feature,
but why does inserting work when deletion is not working the other way.
I am using firebase and want to loop through my messages that I have and delete certain ones based upon a user's uid.
Here is an image of what I have for the structure of my data:
So far I know you would start of as something like:
Firebase.database().ref('messages').on('value', snapshot => {
snapshot.forEach(snap => {
if(snap.val().user.id === currentUser.uid){
//delete message here
};
});
});
Where do I go from here?
First of all, you probably want to use once() instead of on(). If you modify the contents of the database that you're working with, your on() will get triggered again for each change. You can see how that might be problematic for your case, if you only want to loop through the data once. Definitely learn about the difference between once() and on().
If you have a DataSnapshot type object, you can delete the contents of the database at its location with
snap.ref.remove()
Definitely read up on the Reference object type.
I'm using ionic's events to pass data from page to page. In this instance I'm passing an array to another page, let's say with two objects. The data I'm wanting to add to is called dataOne and I'm using a life cycle function so that when the user enters the page they will be automatically tested from this function whether or not there is an event to be concatenated onto dataOne. The issue is, the data isn't being added. I'm able to retrieve the data but nothing happens to the table, as I'm still getting the same result.
ts
ionViewWillEnter(){
this.events.subscribe('market', (dataTwo) => {
return this.dataOne = this.dataOne.concat(dataTwo)
})
}
What is 'Market' ? dataOne is array? In my opinion,
dataOne: any[]=[];
...
this.events.subscribe((dataTwo) =>{
this.dataOne.push(dataTwo.market); // if market you want to catch data
}
Question related somewhat to: Ember.js: retrieve random element from a collection
I've two routes: randomThing route and things route.
The former displays a... random thing from an API (GET /things/random) (there is a button to "Get another random thing"), the latter: displays all things: (GET /things).
The problem is that EVERY TIME when I click on Get another random thing and new thing is displayed and I go to recipes route this newly displayed random thing is added to the collection...
Action to get random thing performs a find("random") as suggested in related question and sets this.content to this value.
What is wrong here?
EDIT:
I'm using ember-data and my route is like this:
App.ThingsRoute = Ember.Route.extend({
model: function() {
return App.Thing.find();
}
});
The problem is that EVERY TIME when I click on Get another random thing and new thing is displayed and I go to recipes route this newly displayed random thing is added to the collection...
This is expected behavior. App.Thing.find() does not simply query the api and return results. Instead find() returns an array containing of all Things ember knows about. It includes objects returned by past calls to find(), objects created client-side via App.Thing.createRecord(), and of course individual objects queried via App.Thing.find('random'). After returning this array, find() and kicks off another API call and if that returns additional records they are pushed onto the array.
What is wrong here?
It does not sound like anything is wrong per-se. If you want to prevent random things from showing up in the ThingsRoute, you'll need to change that route's model to be a filter instead of just returning every Thing. For example:
App.ThingsRoute = Ember.Route.extend({
model: function() {
//Kick off query to fetch records from the server (async)
App.Thing.find();
//Return only non-random posts by applying a client-side filter to the posts array
return App.Thing.filter(function(hash) {
if (!hash.get('name').match(/random/)) { return true; }
});
}
});
See this jsbin for a working example
To learn more about filters I recommend reading the ember-data store-model-filter integration test
I have a dijit Select widget and need to do something when the user clicks one of the dropdown items. Meaning I need access to the clicked item, to retrive some information, and call one of my own functions.
I've tested to attach an onChange on the select and I can get the text value selected fine. But I need the object and not the value. The object holds more values in a data-info-attribute.
Basically what I'm trying to achieve is to show one value in the list but send along more values to populate other fields when selected.
Background: This is a typeahead field populated thru AJAX by a server function. There IS a store attached but it's empty (as far as I can tell) so I've been unsuccessful trying with: .store.fetchItemByIdentity - always returns nothing.
ta.store.fetchItemByIdentity({
identity: ta.getValue(),
onItem: function(item, request){
console.log(item),
console.log(request)
}
})
I expect the log to show item- and request-object, but they're both undefined.
ta.getValue() get's the selected value as expected.
What's the best way to achieve this?
Have a look at my answer to onChange not sufficient to trigger query from Dojo Combobox and also to jsFiddle mentioned there. I added code specific for your needs there:
select.dropDown.on("itemClick", function(dijit, event) {
var node = dijit.domNode;
console.log(domAttr.get(node, "data-info-attribute"));
// or
console.log(node.dataset.infoAttribute);
});