嘿,我正在尝试获取特定对象的ID,以便现在可以将其发送到后端。我很难一次获得单个对象而不是整个列表。
如果有什么时髦的地方,是因为我对此很陌生,并且已经尝试了很多次
我的JavaScript看起来像这样:
//waits for the html doc to be ready before atempting to run any js.
$(document).ready( () =>{
// jquery getting our json order data from API
$.get("http://localhost:8888/orderslist", (data) => {
// loops through our orderlist api
let rows = data.map(item => {
let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
$clone.find('.customer_name').text(item.customer_name);
$clone.find('.date').text(item.date);
$clone.find('.time').text(item.time);
$clone.find('.pickup').text(item.pickup);
$clone.find('.comments').text(item.comments);
$clone.find('.total').text(item.total + ' Kr.');
let foo = function(){
//gets id from object and sends it to backend using get method
};
// accept and cancel buttons
$clone.find('.order_status').html(
`<button id = "acceptOrder" type="button" onclick="${foo()}">Accept</button>` +
`<button id = "cancelOrder" type="button" onclick="${foo()})">Cancel</button>`
);
// loops through orders product name
let productsName = item.products.map(prod => `${prod.name}`);
$clone.find('.products').html(productsName.join('<br />'));
// loops through orders product price
let productsPrice = item.products.map(prod => `${prod.price} Kr.`);
$clone.find('.price').html(productsPrice.join('<br />'));
return $clone;
});
//appends to our frontpage html
$("#frontpage_new_ordertable tbody").append(rows);
});
});
这是我从路线中获取的json数据。
{
id: "3JBBdJdBUP7QyDvCnmsF",
date: "30/04-2020",
time: "13:40:41",
total: 40,
products: [
{
name: "Caffe Latte",
price: 40
}
]
}
我的html看起来像这样:
<!-- this is the table of new orders -->
<table id="frontpage_new_ordertable">
<tbody>
<tr>
<th>Customer</th>
<th>Date</th>
<th>Ordered at</th>
<th>Wished pickup time</th>
<th>Order</th>
<th>Comments</th>
<th>Price</th>
<th>Total</th>
<th>Order Status</th>
</tr>
</tbody>
<tfoot>
<tr>
<td class="customer_name"></td>
<td class="date"></td>
<td class="time"></td>
<td class="pickup"></td>
<td class="products"></td>
<td class="comments"></td>
<td class="price"></td>
<td class="total"></td>
<td class="order_status"></td>
</tr>
</tfoot>
</table>
编辑后,它看起来像这样。我没有看到接受按钮
// loops through our orderlist api
let rows = data.map(item => {
let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
$clone.data("id", item.id);
$clone.find('.date').text(item.date);
$clone.find('.time').text(item.time);
$clone.find('.pickup').text(item.pickup);
$clone.find('.comments').text(item.comments);
$clone.find('.total').text(item.total + ' Kr.');
$(function() {$(document).on("click", ".acceptOrder", foo);
function foo() {
var btn = $(this);
var row = btn.closest("tr");
var id = row.data("id");
var name = row.find(".customer_name").text();
};
$clone.find('.order_status').html(
`<button type="button" class='acceptOrder">Accept</button>`
);
});
答案 0 :(得分:1)
代码的相关部分是:
$(function() {
$.get("http://localhost:8888/orderslist", (data) => {
// loops through our orderlist api
let rows = data.map(item => {
let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
let foo = function(){
//gets id from object and sends it to backend using get method
};
$clone.find('.order_status').html(
`<button id="acceptOrder" type="button" onclick="${foo()}">Accept</button>`
);
return $clone;
});
//appends to our frontpage html
$("#frontpage_new_ordertable tbody").append(rows);
});
});
第一步是删除重复的ID:和onclick =
$(function() {
$(document).on("click", ".acceptOrder", foo);
function foo() {
}
...
$clone.find('.order_status').html(
`<button type="button" class='acceptOrder">Accept</button>`
);
...
});
现在,单击“接受”按钮将调用“ foo”作为事件,并以this
作为按钮。您可以将原始JSON ID
放在按钮上作为数据ID或放在父tr
上:
let rows = data.map(item => {
let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
$clone.data("id", item.id);
然后,在foo中,您可以将其获取为:
function foo() {
var btn = $(this);
var row = btn.closest("tr");
var id = row.data("id");
var name = row.find(".customer_name").text();
...
}
另一种选择是以相同的方式添加到按钮-我倾向于在tr
上使用它,因为无论如何您可能都需要获取tr
,这意味着它可以从任何地方使用元素(例如另一个按钮)。
`<button type="button" data-id="${item.id}" ...
包括更多上下文:
$(document).ready(() =>{
// add event listener here
$(document).on("click", ".acceptOrder", foo);
// add the event handler at the top-level inside doc.ready
function foo() {
var btn = $(this);
var row = btn.closest("tr");
var id = row.data("id");
var name = row.find(".customer_name").text();
...
}
// original code
$.get("http://localhost:8888/orderslist", (data) => {
// loops through our orderlist api
let rows = data.map(item => {
let $clone = $('#frontpage_new_ordertable tfoot tr').clone();
// add ID to the row as a data-id
$clone.data("id", item.id);
// original code
$clone.find('.customer_name').text(item.customer_name);
...etc
// remove let foo =
// let foo = function(){
// update accept/cancel buttons
// accept and cancel buttons
$clone.find('.order_status').html(
`<button class="acceptOrder" type="button">Accept</button>` +
`<button class="cancelOrder" type="button">Cancel</button>`
);