I am using react-admin framework and I am trying to print data from my array.
My array is looking like this:
enter image description here
As you can see it currently has 3 indexes. Each of them stores different data. I want to print these data on to same page.
I am aware that I need to use some sort of cycle (for, foreach), but I really dont know how to implement it in shorthand.
This is my code, that I need to loop:
ID: {this.state.source[index].Id}<br></br>
AuditDate: {this.state.source[index].AuditDate}<br></br>
UserId: {this.state.source[index].UserId}<br></br>
Resource: {this.state.source[index].EntitySet}<br></br>
Entity1: {this.state.source[index].Entity1}<br></br>
Entity2: {this.state.source[index].Entity2}<br></br>
Operation: {this.state.source[index].Operation}<br></br>
EndPoint: {this.state.source[index].EndPoint}<br></br>
Changes: {this.state.source[index].Changes}<br></br>
Any ideas how to loop this?
Thank you in advance
You can make use of map to iterate over array,
{
this.state.source && this.state.source.length > 0 && this.state.source.map(source => {
return <>
<div>ID: {source.Id}</div>
<div>AuditDate: {source.AuditDate}</div>
<div>UserId: {source.UserId}</div>
<div>Resource: {source.EntitySet}</div>
<div>Entity1: {source.Entity1}</div>
<div>Entity2: {source.Entity2}</div>
<div>Operation: {source.Operation}</div>
<div>EndPoint: {source.EndPoint}</div>
<div>Changes: {source.Changes}</div>
</>
})
}
renderSources() {
const sources = source.map((eachSource) => {
return (
<div>
<span>`ID: ${eachSource.Id}`</span>
<span>`AuditDate: ${eachSource.AuditDate}`</span>
<span>`UserId: ${eachSource.UserId}`</span>
<span>`Resource: ${eachSource.EntitySet}`</span>
<span>`Entity1: ${eachSource.Entity1}`</span>
<span>`Entity2: ${eachSource.Entity2}`</span>
<span>`Operation: ${eachSource.Operation}`</span>
<span>`EndPoint: ${eachSource.EndPoint}`</span>
<span>`Changes: ${eachSource.Changes}`</span>
</div>
);
});
return sources;
}
render() {
return (<div>{this.renderSources()}</div>);
}
Related
Hi I'm trying to display variants in two separate categories Color and Size, to do this I need to get data from the api, I can access "attributes", but I would like to be able to access 0 and 1 and map them, I have no idea how to do this.
{variants.length > 1 ? (
variants.attributes.map(({ name, values }) => (
<ProductOptions
key={`key-${name}`}
name={name}
values={values}
selectedOptions={selectedOptions}
setOptions={setOptions}
/>
))
) : (
<Fragment />
)}
Thank you so much!
As i understand the output of Array with 6 elements where each of that 6 has attributes and attributes is yet another array and you want to loop through those attributes so you need 2 loops. One to loop through parent array and seconds inside the child.
variants.map((variant) => {
variant.attributes.map((attribute) => {
console.log('attribute: ', attribute);
console.log('attribute id: ',attribute.id);
});
});
p.s. you may use forEach https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach but it has little difference in this case.
Also it seems like you working with ReactJS and building some JSX to put into rendered jsx. I would argue to form the array upfront and in final jsx just insert the rows, so your final jsx will be more readable, especially in cases of double loops or any more complex jsx.
const attributes = [];
variants.map((variant) => {
variant.attributes.map((attribute) => {
console.log('attribute: ', attribute);
console.log('attribute id: ',attribute.id);
attributes.push(<div key={attribute.id}>{attribute.id}</div>)
});
});
// later
return (
<div>
{attributes}
</div>
)
I've got the following object, and trying to loop through the list:
const [object, setObject] = useState({
answer: {
[29]: {
list: [],
},
},
});
Now I've got a separate function to loop through the list further down the code, but somehow getting 'undefined' when the page tries to load initially.
const List = object["answer"][29]["list"].map(
(item, index) => (
<div> {item.name} </div>
...etc
)
)
Not sure what I'm missing here. Any help is appreciated! Thanks!
You can use the optional chaining operators when working with arrays.
object?.["answer"]?.[29]?.["list"]?.map(...)
This way it should not crash if the value is not set when loading.
In Cyress Test writing an test of react application when I click on a Listbox in the drop down it get list of data.
eg : 123a, 1233, 111c etc suppose have count 50
then select each 1 by 1 however need to compare each that if its certain account perform certain checks
in details:
have searched and clicked the listbox but the issue i am facing how can i find the total number of elements in that listbox and need to traverse each item/value 1 by 1 and when select verify certain asserts.
so 3 challenges where i am stuck
1) How to get total number of elements have tried initial count=cy.get('#alias').length seems not working.
2) after we get how can I iterate through the loop 1 at a time as after selecting 1 item as have to certain assertions.
Thanks
Varun Awasthi
First:
cy.get("alias").length can never work because of the async structure of cypress. The get() returns never the wrapped element but a chainable. Thus you would have to write something like get(..).then(obj => ...)
Second:
Given this HTML structure:
<div>
<div class="item">
...many other html code
</div>
<div class="item">
...many other html code
</div>
<div class="item">
...many other html code
</div>
</div>
You can get the length ( = the mount of item elements) like this:
it("test", () => {
cy.get(".item").should($items => {
cy.log(`amount: ${$items.length}`)
})
})
Third:
Please try something like this:
it("test", () => {
cy.get(".item").each($item => {
cy.wrap($item).should($e => {
expect($e.text()).to.eq("test")
})
})
})
But you must not use cypress commands here. Something like this should also work:
cy.get(".item").should($items => {
for(var i = 0; i < $items.length; i++) {
expect($items[i].text()).to.eq(...)
}
})
So you can also work with a combination of cypress commands and jQuery.
Let me know if you need furhter assistance
I am new to this, but to get the count of elements returned I would use something like this:
cy.get('.item').its('length')
Then, if you want to work with specific elements from that array:
.then(size => {
for(i= 0; i < size: i++) {
cy.get('.item').eq(size).should('have.value', 'list item')
}
})
I searched all day but I didn't find the solution to my problem.
I'm new to React Native so I'm stucked ...
Here's my problem :
I fetch an api to the get data, I'm doing it with axios and it's ok I can render my component !
Then I don't want to display ALL ITEMS of my Array but I want to display some items according to different values with 2 buttons :
<Button onPress={Get ALL ITEMS with this value}/>
<Button onPress={Get ALL ITEMS with ANOTHER VALUE} />
My issue is that I'm modifying the state of my array 'products' with new information but that's not what I want. I always want that I'm displaying information according to a particular VALUE in the Array and still get my Full Array...
Here's some piece of code of what I'm doing :
onPressFirstButton() {
let newArray = [...this.state.products];
this.setState({
products: newArray.filter(function(product){
return product.value == 32;
})
});
}
onPressSecondButton() {
let otherArray = [...this.state.products];
this.setState({
products: otherArray.filter(function(product){
return product.other_value == 389;
})
});
}
I'm sure it's not the best way because it's not working.. I hope you will understand what I'm trying to say..
Thank you
Since you seem to be using the products property to populate your template, consider using a separate variable for that instead, that way you don’t have to mess with your state when doing your filtering. Maybe this will help:
displayProducts = []
onPressFirstButton () {
this.displayProducts = this.state.products.filter(product => /* logic */)
}
This gives Error at for loop
let contact=[{name:"Mithun"},{name:"Keerthana"},{name:"Jayendara"},{name:"Shivani"}]
for (i=0;i<list;i++)
{
<h1>{content[0].name}</h1>
}
You need to use contact.length rather than list in the for loop. You also need to use contact[i] rather than content[0].
for (i = 0; i < contact.length; i++) {
<h1>{contact[i].name}</h1>
}
If you are using TSX (TypeScript + React), you can use the map function to make this easier.
return contact.map(c => <h1>{c.name}</h1>);
Suggest you a few things
In your question you are looping over list rather than that you should be looping over contacts
As I understand you wish to craete a JSX element from the contact objects. So you need to push it into an array and then render it like
Code:
let contact=[{name:"Mithun"},{name:"Keerthana"},{name:"Jayendara"},{name:"Shivani"}]
var content = [];
for (i=0;i<contact;i++)
{
content.push(<h1>{contact[i].name}</h1>);
}
and when you want to render this in your render function you will do something like
return (
<div>{content}</div>
)
However since you are using react you should be using map function which are more convient and easy to use
Your code will look like
render() {
return(
<div>
{contacts.map(function(item) {
return (<h1>{item.name}</h1>)
})}
</div>
)
}