I start to learn the alpine js combine with the tailwind. But I don't know how to print the fetch result from json response, try with this
<div x-data="orderSearch()"
class="container mx-auto py-6 px-4"
>
<div class="flex border-2 border-gray-200 rounded">
<input type="text" class="px-4 py-2 w-100 uppercase" placeholder="Search" name="orderidSearch"
x-model="orderidSearch">
<button @click="fetchFulfillment()" class="px-2 py-1 text-white bg-blue-500 rounded hover:bg-green-600">Cari Fulfillment</button>
but return the error in console alpine.js:115 Alpine Error: "TypeError: Cannot read properties of undefined (reading 'inv_id')"
Anyone know how to print the result inside div?
My js function:
function orderSearch() {
return {
orderidSearch: '',
// other default properties
orders: [],
fetchOrders() {
this.isLoading = true;
fetch(`check.php?order_id=${this.orderidSearch}`)
.then(res => res.json())
.then(data => {
this.isLoading = false;
this.orders = data.orders;
console.log(data);
});
console.log(this.orders);
},
....
json return data:
{"data":[{"inv_id":"8768768768"]}
The problem occurs because you will get an iterable object. I rewrite your code a little bit and put the function inline to show the first entry. If you have a collection then build your loop to sow every item.
<div
class="container mx-auto py-6 px-4"
x-data="{
orders: null,
isLoading: false,
orderSearch() {
this.isLoading = true;
fetch(`check.php?order_id=${this.orderidSearch}`)
.then((response) => response.json())
.then((json) => this.orders = json);
}
}" x-init="orderSearch()">
<p x-text="orders[0].inv_id"></p>
</div>