I am trying to query my categories within my product. I created a table in which I want to see the categories of my product table. I am using Prisma as my typeORM and Apollo as a way to query my Postgres database. Please see the attached photo of my table. I have categories that are within my Product model.
Here is my query function using my UseQuery Hook from Apollo/Client.
const AllProductsQuery = gql`
query {
products {
id
name
description
img
price
ingredients
categories {
id
name
}
}
}
`
What I thought this would do was since I am querying the categories within the products I would be able to hit that information. However, it isn't even console logging that data.
This is what I have
<Table striped bordered hover >
<thead>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
{data && data.products.map((product: Product, categories: Category) => {
return (
<tbody>
<tr>
<td>{product.name}</td>
<td>{product.categories.name}</td>
<td>{product.price}</td>
</tr>
</tbody>
)
})}
</Table>
However this doesn't even show the categories information within my products within the console log. The Product.name and Product.price work perfectly however, I try to run the same thing with product.categories.name doesn't work. Any information would be great!
In this code that you sent you're renaming product to Product in the data.products.map.
If you received categories from server, as I asked you in the comment, try this code
<Table striped bordered hover>
<thead>
<tr>
<th>Product</th>
<th>Category</th>
<th>Price</th>
</tr>
</thead>
{data &&
data.products.map((product) => {
return (
<tbody>
<tr>
<td>{product.name}</td>
<td>{product.categories.name}</td>
<td>{product.price}</td>
</tr>
</tbody>
);
})}
</Table>
Related
I want to iterate over an array and make a table row with its elements.
The coinlist is an array of object containing coin symbol and price.
Is there any way to print table row with map function.
<tbody>
{coinlist.map((coin) => {
return {
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
} })}
</tbody>
<table>
<tr>
<th>Symbol</th>
<th>Price</th>
</tr>
{coinlist.map(coin)=>(
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
))}
</table>
If you want to print out the object fields which make up the table row you can either console.log the entire object which makes up the row or each individual field. Something along the lines of:
<tbody>
{coinlist.map((coin) => {
console.log(coin); // see the entire coin object
console.log(`symbol: ${coin.symbol} price: ${coin.price}`); // see individual fields of interest
return {
<tr>
<td>{coin.symbol}</td>
<td>{coin.price}</td>
</tr>
}
})}
</tbody>
Hopefully that helps
I've a separate javascript code which is fetching data from api and inserting in browsers localStorage.
API is fetching ETA data and saving in localStorage as id_ETA(e.g 12342_ETA) key.
When the values in local storage gets updated then my html table ETA column values should also get updated without refreshing the page.
Right now I need to refresh the entire page in order to view the updated ETA in the html.
HTML Table:
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
<script>
var data = getPlanData();
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
for(var i=0;i<data.length;i++){
document.write("<tr>");
document.write("<td>"+data[i]['id']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
document.write("<td>"+data[i]['departure']+"</td>");
document.write("<td>"+data[i]['arrival']+"</td>");
if (localStorage.getItem(data[i]['id']+'_ETA'))
{
document.write("<td>"+localStorage.getItem(data[i]['id']+'_ETA')+"</td>");
}
else
{
document.write("<td>-</td>");
}
document.write("</tr>");
</script>
</tbody>
</table>
</div>
getPlanData():
function getPlanData() {
localData = localStorage.getItem('plan');
result = csvToJSON(localData);
return result;
}
Note: ETA is coming from separate API
Is there a way to update the ETA column when there is new ETA value in localStorage without refreshing the page?
Assuming getPlanData() does the writing to localStorage, you need to do two things
Don't use document.write, certainly not after load since it wipes the page
save to localStorage in getPlanData() AND
call this update with the data in the getPlanData function - this script can be copied to the head of the document inside script tags and called as update(data)
const update = data => {
const html = data.map(item => (
`<tr>
<td>${item.id}</td>
<td>${item.arrival}</td>
<td>${item.departure}</td>
<td>${item.arrival}</td>
<td>${localStorage.getItem(item.id+"_ETA") || "-"}</td>
</tr>`));
document.querySelector(".table tbody").innerHTML=html.join("")
}
<div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Arrival Address</th>
<th>Departure Address</th>
<th>ETA</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
If you post an example of your data, I am sure we can find a better way to get the ETA than localStorage.getItem(item.id+"_ETA")
UPDATE: You CAN do
var data = getPlanData();
update(data)
Very new to react, I currently have a table shown below. I have two columns that are data pulled from my database, an input field column, and buttons to the side. Essentially it's for inventory management. You'll see the quantity you have in your database, if you want to restock or use the inventory you'll add the amount in the quantity input field then press restock or use and it'll send a request to the database to do the according action. This probably isn't the best way to make such a table since I've pulled code from several different articles and tutorials. Any advice on how to move forward and have my restock/use buttons working that'll use the input field data and quantity would be great.
Picture of table in react app
Here's currently what I have in my render function
render() {
return (
<div>
<h3>Restock/Use</h3>
<table className="table table-striped table-bordered table-hover" style={{marginTop:20}}>
<thead>
<tr>
<th>Description</th>
<th>Current Quantity</th>
<th>Amount</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
{this.inventoryList(this.state.inventory)}
</tbody>
</table>
</div>
)
}
My inventory state that I have mapped is here
inventoryList = (inventory) =>{
return inventory.map((inventory, index) => (
<tr>
<td>{index}</td>
<td>{inventory.description}</td>
<td>{inventory.quantity}</td>
<input type='number'></input>
<td>
<div class="btn-toolbar">
<button type="button" id='btnRestock' class="btn-primary btn-sm" onClick={this.restockInventory}>Restock</button>
<button type="button" id='btnRestock' class="btn-danger btn-sm">Use</button>
</div>
</td>
</tr>
))
}
My button function that I have is below
restockInventory(index){
console.log('HELLLOO')
console.log(this.state.inventory)
}
I want to change the value of table at the runtime, means user can change table header or table rows value manually.
I used contentEditable to change the table data directly by the user from the table, by I am unable to get the change input by the user, and always get old text which shown in the table,how can I get the updated value of table in ReactJs
<table
id="mytable"
className="table table-striped table-nowrap dataTable"
cellSpacing="0"
width="100%"
>
<thead>
<tr>
{this.state.colarray.map((coldata, ind) => {
return (
<th key={ind} onChange={this.colchange}>
<div contentEditable>{coldata}</div>
</th>
);
})}
</tr>
</thead>
<tbody>
{console.log("rows", this.state.rowarray)}
{this.state.rowarray.map((rowdata, ind) => {
return (
<tr id="somerow">
{this.state.colarray.map((col, index) => {
return (
<td>
<div contentEditable>{rowdata["item" + index]}</div>
</td>
);
})}
</tr>
);
})}
</tbody>
</table>
<button onClick={this.show}>button</button>
When the user clicks the button.show() function works, where I am trying to get the updated value but it always show old data of table,I have also used onChange event table header <th> trying to get the value but it also not works even the colchange is not called when I change in <th>.I want updated input which is entered by user on table how can I get?
I've written the following code:
const TableRow = ({row, i}) => (
<tr key={row.barcode}>
<td>{i}</td>
<td>{row.name}</td>
<td>{row.description}</td>
<td>{row.brand}</td>
<td>{row.barcode}</td>
</tr>
);
that is called in another component render() function that is
var table = (<Table striped bordered condensed hover>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
{
this.state.products.map((row, i) =>
<TableRow row={row} id={i}/>
)
}
</tbody>
</Table>);
return table;
The problem is that in the rendered HTML all the <td> tags don't have any key property so
<tr>
<td></td>
<td>NAME</td>
<td>DESCR</td>
<td>NDARB</td>
<td>800800800</td>
</tr>
without any key property.
Keys help React identify which items have changed, are added, or are removed.
Keys are used internally and are never rendered in DOM. If you want to use it as an identifier, use id attribute in addition.
Ref: https://reactjs.org/docs/lists-and-keys.html#keys
That's because Key is a React property.
From the React docs:
Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity
They are not rendered into the actual DOM, they are only used internally.