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.
Related
I'm not able to access the populated fields of mongoose objects. I want to output it in my page.
Example:
"console.log(booking.assignedUser.first)" gives me back:
TypeError: Cannot read properties of undefined (reading 'first')
But from what I can tell, this should be working. The field is clearly there.
In my jsx file:
console.log(booking.assignedUser)
Object:
{
etc etc
assignedUser: { _id: new ObjectId("62f068b068802d58c8d35442"), first: 'driver' },
etc etc
}
So why I can access booking.assignedUser and it shows me the data, but booking.assignedUser.first doesn't work?
Because these values are being populated from the DB, I guess they aren't loading fast enough so it's giving me this error.
If I check to make sure the value exists first, then use it, it's working.
I'm working with a lot of this type of data in my app, so instead of outputting the jsx directly in the react object, I'm using a function to return it all for me which I pass in the db data.
using a ternary at the beginning of the output within the React component was not good enough, for example.
{ data ?
<Form>
<SomeStuffHere>
<SomeMoreStuffHere>
<Form.Control> {data.something} </Form.Control>
</Form>
: '' }
This was not good enough. It would still error out. I had to place the ternary immediately on the field in order for it to work.
Doing this for every single field would be a pain in the ass, so putting it into a function first seems to work better.
Probably , you are trying to achieve data's populates when data didn't set yet. Need to be sure data is set already.
You can use it like ;
booking.assignedUser && console.log(booking.assignedUser.first)
If the page can't view components due to data is empty, need to use this condition beginning of view component.
data.length > 0 && ...</Component/>
I have an array of Obj1. In a project vue 3+ts , after clicking the button "load more", i call via axios the backend service and retrive an array of the same type. I want to append this rows to the previous array, but it is not working :
this.Array1.push(response.data)
If i add 1 item at the time, the Array1 gets updated:
this.Array1.push(response.data[0])
What am i missing?
Based on your question that this code works:
this.Array1.push(response.data.results[0])
Indicates that response.data.results is the array you want to work with. If you want to push that entire array in, you can simply use the ES6 spread operator:
this.Array1.push(...response.data.results)
You're pushing different values. response.data.results is an array, while response.data is a json data with an array.
So, you might want to just do:
this.Array1 = response.data.results
I am really new to Vue JS. I was trying to print my nested object using console.log but it throws me an undeifned error.
Array Image
View Code
<b-button variant="primary" v-on:click="dontknow();">Print</b-button>
Script
methods:{
dontknow(){
console.log(this.allPlayerList.booker_id);
},
}
It displays me undefined when I use console.log(this.allPlayerList.booker_id). Can anyone please let me know what am I doing wrong? I want to get all the booker_id from allPlayerList.
allPlayerList obviously is an array of objects, which doesn't have itself a booker_id property, but contains objects which have it.
To print all the booker_id you need to loop over the array, and print it for every object, there are multiple ways of doing this, some of the common ways are:
this.allPlayerList.forEach(player => {
console.log(player.booker_id);
});
Another way would be
console.log(this.allPlayerList.map(player => return player.booker_id));
The fist way will print every booker_id separately, while the second will print and array of all the booker_id items.
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')
I have a plunker that is trying to sort a collection of objects for display. The map looks like...
{
test1:{
name:'Cccccc',
title:'Aaaaaa'
}
}
I would like to order this list by title using a filter, however, the following seems to fail...
this.drawers = $filter('orderBy')(this.drawers, 'title', false);
I found an answer to a similar question, however, this does not appear to apply to my scenario because it changes the structure of the object returned from the filter. Does anyone know how I would write a custom filter to handle this?