This is angularjs app.
In a view I have access to an array of objects:
var arrayOfObjects = [{"name":"blue"},{"name":"red"}];
I have then a div that should display only if the arrayOfObjects contains an entry with
name=='red'
I had a look at "contains" but seems to work only on arrays of elements, not of objects.
Is it possibile to do this directly in the view without needing to code this in the controller?
Since the array does not understand what is inside of it (in this case object), you have to check each element in the condition.
A short-way to do that, would be using the some method like this:
<div *ngIf="arrayOfObjects.some(({ name }) => name == 'red')"></div>
The some will return true if some element in arrayOfObjects satisfy this condition. Other way, would be to map the arrayOfObjetcs to arrayOfNames and them check if that array contains name, like this:
arrayOfObjects.map(({ name }) => name).contains('red')
Related
I want to remove the type 'A' from the capital. How do I do it? Any code example will be appreciated. I am working on a react project.
As far as I can tell there is no nested array in the document you shared. In that case you can use the arrayRemove operator to remove a unique item from the array:
const cityRef = doc(db, "cities", "capital");
await updateDoc(cityRef, {
region: arrayRemove({ type: "A" })
});
A few things to note here:
You can to pass the entire array item to the arrayRemove operator, as it only removes array items that exactly and completely match the value you pass.
The arrayRemove operations removes all items that match. So if you have multiple { type: "A" } items in the array, all will be removed.
This operation can only work on an array field at a known path, it cannot work on an array that is nested under another array.
If your use-case can't satisfy any of the requirements above, the way to remove the item would be to:
Load the document and get the array from it.
Update the array in your application code.
Write the entire top-level array back to the database.
you have to get the doc and clone properties into temporary object
you modify your temp object (remove item form region array)
update original doc with temp object
a cleanest way is to do that throught a firestore/transaction
a small example to have a small approach
const doc = await cityRef('cities/capital').get()
const temp = JSON.parse(JSON.stringify(doc.data()))
temp.region = temp.region.filter(item => item.type !== 'A')
await cityRef('cities/capital').update(temp)
I am new to React JS & currently trying to iterate a certain data to present the same in react js but not able to do the same. The data which looks something like this
Now, the final output should be look something like this in tabular format
The things which I tried are:-
The error which I am getting below one is for 1 image and for second, the code is not getting parsed.
[![error][5]][5]
So, how to achieve the desired output in react js
It looks like you're trying to use map onto an object, while you should use it on a collection. Maybe try something like this :
Object.values(listData.data).map((meetingRoom) => { // your code here });
This will allow you to use the content inside your data object as an array of objects.
Edit : Sorry, I didn't understand you need to access the key as well as the value. To achieve that you can simply use Object.entries which will return the key (Meeting Room 1, Meeting Room 2 in this instance) in the first variable and the array of items in the second variable.
Here's a quick example:
Object.entries(listData.data).forEach(([key, value]) => {
console.log(key, value);
// You could use value.map() to iterate over each object in your meeting room field array.
});
Note : you can also use a for (... of ...) loop like this instead of a forEach :
for (const [key, value] of Object.entries(listData.data)) {
console.log(key, value);
};
For more information about the Object.entries method, feel free to check the MDN Webdocs page about it here.
console.log(holder);
console.log(index);
console.log(holder);
setWholeData(wholeData.filter((el, i) => i !== index));
console.log(holder);
For the above code, I want to remove one element with index = 'index' in wholeData which is a state setup using useState and initialize with []. In my test case, before this part of code, wholedata should have two elements and this part of code should remove one of its elements. I assign the updated/New array to holder and want to assign it to wholedata using 'setWholeData()".
But the problem is that if I do
setWholeData(holder). Then the holder will contain two elements, which means that the filter function did not work somehow. If I do
setWholeData(wholeData.filter((el, i) => i !== index));
The value of holder is what I expected, but 'wholedata' is not updated correctly still. The element is not removed. Seems like the filter in the
setWholeData(...) is not working.
If anyone could give a little hand, it would be so appreciated. Sorry for the confusing description, if any clarification is needed, please feel free to message.
Filter returns an array where the result of the callback is 'true'.
If you want to remove an element by its index you can use a combination of findIndex and splice to find the index of the element you want to remove and splice to execute the removal of that element.
I have a table name Post, the function below Posts.query give me all the post and stock them in a variable postsATraiter.
Posts.query({}, function() {
$scope.postsATraiter = $scope.posts;
});
This works fine I can do a :
console.log($scope.postsATraiter.length);
This give me the number of post who are in my table, but now I would like to display the value inside my postsATraiter ( date for exemple ).
I try this :
console.log(postsATraiter.valueOf(1).date);
This is not working, I think valueOf is not the correct function for get one element, but I don't know which one I need to use. Thanks for answer
You can iterate through the array of objects and print the needed property value as
$scope.postsATraiter.forEach(function(element) {
console.log(element.date);
});
The function is called for each object in the array.
To access the first element's date property you can simply do
$scope.postsATraiter[0].date
I have a json containing objects originating from my Symfony controller.
I need to loop over the objects like so
<li data-ng-repeat="course in courses"></li>
In my app controller I do this
$scope.courses = {{ courses | serialize('json', serialization_context().setGroups(['identification', 'courseListing', 'portalOverview'])) | raw }};
The order is okay when I check the scope variable 'courses' with the ng-inspect browser plugin.
Screenshot : http://i.imgur.com/pKy00uo.png
But still the loop seems kinda random. The last object keeps getting placed after the 2nd child.
Any ideas? Need more info, just ask. Thanks!
Okay, so it seems Angular doesn't handle objects too well when given to ng-repeat.
I transformed my object of objects to an array of objects and the objects were rendered in the correct order.
var arrCourses = [];
$.each($scope.courses, function(index, obj){
arrCourses.push(obj);
});
$scope.courses = arrCourses;