Level 102
It looks like you are getting paginated data back, but only expect a single item?
Can you show the controller code?
Oct 12, 2021
6
Level 1
Display data from AJAX success response
How do I get and display data from an Ajax response?
This is what it returned to the console.
{current_page: 1, data: Array(15), …}
current_page: 1
data: Array(15)
0:
amount: "1000.00"
code: "00000020"
content_id: 5
content_type: "App\Models\Downpayment"
created_at: "2021-10-06T01:43:41.000000Z"
deleted_at: null
description: "desc"
items: [{…}]
name: "Downpayment 1"
owner_id: 2
owner_type: "App\Models\Member"
updated_at: "2021-10-06T01:43:41.000000Z"
updated_by: null
[[Prototype]]: Object
1: {id: 21, …
The returned data is in the array form. When the option is selected, its detailed data will be displayed inside the table.
This is my current script:
$( '#invoice' ).change(function() {
console.log('invoice selected!')
var optionSelected = $(this).find("option:selected");
invoiceSelected = optionSelected.val();
console.log(invoiceSelected);
$.ajax({
type: "get",
cache: false,
url : "{{ route('credit-notes.invoices') }}",
data: { invoice : invoiceSelected },
success: function(data) {
console.log('success');
console.log(data);
invoice_id = invoiceSelected
invoice_name = data.name // get the data from response
invoice_date = data.created_at
invoice_description = data.description
invoice_amount = data.amount
var row = '<tr id="row-' + invoice_id + '" class="invoice-row">' +
'<td>' + '<input type="checkbox"/> ' + '</td>' +
'<td>' + invoice_name + '</td>' +
'<td>' + invoice_date + '</td>' +
'<td>' + invoice_description + '</td>' +
'<td>' + invoice_amount + '</td>' +
'</tr>';
$('#invoice-tbody').append(row);
}
});
})
.change();
Level 1
@Sinnbeck This is my controller.
public function invoices(Request $request)
{
$query_params = $request->query();
ksort($query_params);
$query_string = http_build_query($query_params);
$url = (!empty($query_string) ? "/invoices?{$query_string}" : "/invoices");
$response = json_decode(HttpClient::request('get', $url)->getContent());
if (!empty($response->data)) {
$invoices = HttpClient::paginate($response->data, $response->meta->total, $response->meta->per_page, $response->meta->current_page);
foreach($invoices as $invoice) {
$invoice->items = $this->getInvoice($invoice->id)->invoice_items;
}
} else {
$invoices = [];
}
return $invoices;
}
app/Http/HttpClient.php
public static function paginate($items, $total, $per_page, $current_page)
{
return new LengthAwarePaginator(
$items,
$total,
$per_page,
$current_page,
['path' => \Illuminate\Pagination\Paginator::resolveCurrentPath()]
);
}
Level 102
@xxx_kee So you expect to get multiple rows, paginated?
If that is the case, you need to loop over it
data.data.forEach(function(item) {
invoice_id = invoiceSelected
invoice_name = item.name // get the data from response
invoice_date = item.created_at
invoice_description = item.description
invoice_amount = item.amount
var row = '<tr id="row-' + invoice_id + '" class="invoice-row">' +
'<td>' + '<input type="checkbox"/> ' + '</td>' +
'<td>' + invoice_name + '</td>' +
'<td>' + invoice_date + '</td>' +
'<td>' + invoice_description + '</td>' +
'<td>' + invoice_amount + '</td>' +
'</tr>';
$('#invoice-tbody').append(row);
})
Level 1
@Sinnbeck Yes, but this display all data item, I need to display the selected option's data item only.
Level 102
@xxx_kee Then only return what is actually needed in your controller. Make a new method called show() that just return that item
Level 1
@Sinnbeck I got it, Thanks!
Please or to participate in this conversation.