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.
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 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'm using a chart to render a piechart for my app. I have:
Ext.query('.highcharts-container')
that gives me an array of highchart-containers and I'd like to add a custom class to every one of them to add some custom css. I tried:
Ext.query('.highcharts-container').addCls("test")
but says "addCls" is not a function.
below is the img of how it looks:
and accord to the answers below, i tried adding it in seperate app, and it works, but for some reason in this case it constant shows undefined.no clue whts going on?
Ext.query returns an array. Instead, use Ext.select which returns a CompositeElement. It lets you run Ext.dom.Element methods on a group of elements:
Ext.select('.highcharts-container').addCls("test");
Ext.query will return an array of matching components. If you're sure there will always be exactly 1 item in the array, you can use:
Ext.ComponentQuery.query('.highcharts-container')[0].addCls("test")
Otherwise, you should loop through the items and add the class to each component.
Ext.ComponentQuery.query('.highcharts-container').forEach(function (item) {
item.addCls("test");
});