我无法打印从此 JSON 响应获取的值。我正在使用 jQuery 和 Ajax。
在成功响应中，我使用 for-each 函数打印所有数据，在我的 JSON 响应中，有多个树。
当我打印单个数据时，它可以使用此代码工作。
console.log(response.saleOrderDTO.billingAddress.name) //for fetching name
但我试图附加
billingAddressundefined<table id="table2"></table>
$.ajax({
type: "POST",
cache: false,
timeout: 10000,
success: function (response) {
var response = $.parseJSON(response);
$.each(response.saleOrderDTO.billingAddress, function(i, item) {
$("table#table2").append(`
<tr><td>${item.name}</td></tr>
`)
});
}
})
请帮忙 - JsFiddle
您提供的示例数据不是有效的 JSON。有几个电子邮件地址
[email protected]"该代码片段演示了如何将收到的数据转换为多个 html 表格：
const dat={ "successful": true, "message": "string", "errors": [ { "code": 0, "fieldName": "string", "description": "string", "message": "string", "errorParams": { "additionalProp1": {}, "additionalProp2": {}, "additionalProp3": {} } } ], "warnings": [ { "code": 0, "message": "string", "description": "string" } ], "saleOrderDTO": { "code": "SO1016233", "displayOrderCode": "Sushant1", "channel": "CUSTOM", "displayOrderDateTime": 1598293800000, "status": "PROCESSING", "created": 1598335400000, "updated": 1598335500000, "notificationEmail": "[email protected]", "notificationMobile": "9999999999", "customerGSTIN": null, "cod": false, "priority": 0, "currencyCode": "INR", "customerCode": "sushant", "billingAddress": { "id": "305034", "name": "Sushant", "addressLine1": "Second floor Laxmi Nagar", "addressLine2": "", "city": "New Delhi", "state": "DL", "country": "IN", "pincode": "110092", "phone": "12345678", "email": "[email protected]", "type": null }, "addresses": [ { "id": "305034", "name": "Sushant", "addressLine1": "Second floor Laxmi Nagar", "addressLine2": "", "city": "New Delhi", "state": "DL", "country": "IN", "pincode": "110092", "phone": "12345678", "email": "[email protected]", "type": null }, { "id": "305033", "name": "Sushant", "addressLine1": "Lajpat Nagar", "addressLine2": "xyz", "city": "New Delhi", "state": "DL", "country": "IN", "pincode": "110024", "phone": "123456789", "email": "[email protected]", "type": null } ], "shippingPackages": [ { "code": "03P1008221", "saleOrderCode": "SO1016233", "channel": "CUSTOM", "status": "CREATED", "shippingPackageType": "124", "shippingProvider": null, "shippingMethod": "Standard-Prepaid", "trackingNumber": null, "trackingStatus": null, "courierStatus": null, "estimatedWeight": null, "actualWeight": null, "customer": "sushant", "created": 1598335501000, "updated": 1598335500000, "dispatched": null, "delivered": null, "invoice": 0, "invoiceCode": null, "invoiceDisplayCode": null, "noOfItems": 2, "city": "tikh", "collectableAmount": 200, "collectedAmount": null, "paymentReconciled": false, "podCode": null, "shippingManifestCode": null, "items": { "itemCode": { "itemSku": "sushant183", "itemName": "sushant183", "itemTypeImageUrl": null, "itemTypePageUrl": null, "quantity": 2 } }, "customFieldValues": [], "shippingLabelLink": null } ], "saleOrderItems": [ { "id": 488290, "shippingPackageCode": "03P1008221", "shippingPackageStatus": "CREATED", "facilityCode": "03", "facilityName": "mumbai", "alternateFacilityCode": null, "reversePickupCode": null, "shippingAddressId": 305033, "packetNumber": 0, "combinationIdentifier": null, "combinationDescription": null, "type": "NORMAL", "item": null, "shippingMethodCode": "STD", "itemName": "sushant183", "itemSku": "sushant183", "sellerSkuCode": "sushant183", "channelProductId": "sushant183", "imageUrl": null, "statusCode": "FULFILLABLE", "code": "sushant183-0", "shelfCode": "SSS1", "totalPrice": 100, "sellingPrice": 100, "shippingCharges": 0, "shippingMethodCharges": 0, "cashOnDeliveryCharges": 0, "prepaidAmount": 0, "voucherCode": null, "voucherValue": 0, "storeCredit": 0, "discount": 0, "giftWrap": null, "giftWrapCharges": 0, "taxPercentage": null, "giftMessage": null, "cancellable": true, "editAddress": true, "reversePickable": false, "packetConfigurable": false, "created": 1598335400000, "updated": 1598335500000, "onHold": false, "saleOrderItemAlternateId": null, "cancellationReason": null, "pageUrl": null, "color": null, "brand": null, "size": null, "replacementSaleOrderCode": null, "bundleSkuCode": null, "customFieldValues": [], "itemDetailFieldDTOList": [], "hsnCode": "12311625", "totalIntegratedGst": 0, "integratedGstPercentage": 0, "totalUnionTerritoryGst": 0, "unionTerritoryGstPercentage": 0, "totalStateGst": 0, "stateGstPercentage": 0, "totalCentralGst": 0, "centralGstPercentage": 0, "maxRetailPrice": 100, "itemDetailFields": null }, { "id": 488291, "shippingPackageCode": "03P1008221", "shippingPackageStatus": "CREATED", "facilityCode": "03", "facilityName": "mumbai", "alternateFacilityCode": null, "reversePickupCode": null, "shippingAddressId": 305033, "packetNumber": 0, "combinationIdentifier": null, "combinationDescription": null, "type": "NORMAL", "item": null, "shippingMethodCode": "STD", "itemName": "sushant183", "itemSku": "sushant183", "sellerSkuCode": "sushant183", "channelProductId": "sushant183", "imageUrl": null, "statusCode": "FULFILLABLE", "code": "sushant183-1", "shelfCode": "SSS1", "totalPrice": 100, "sellingPrice": 100, "shippingCharges": 0, "shippingMethodCharges": 0, "cashOnDeliveryCharges": 0, "prepaidAmount": 0, "voucherCode": null, "voucherValue": 0, "storeCredit": 0, "discount": 0, "giftWrap": null, "giftWrapCharges": 0, "taxPercentage": null, "giftMessage": null, "cancellable": true, "editAddress": true, "reversePickable": false, "packetConfigurable": false, "created": 1598335400000, "updated": 1598335500000, "onHold": false, "saleOrderItemAlternateId": null, "cancellationReason": null, "pageUrl": null, "color": null, "brand": null, "size": null, "replacementSaleOrderCode": null, "bundleSkuCode": null, "customFieldValues": [], "itemDetailFieldDTOList": [], "hsnCode": "12311625", "totalIntegratedGst": 0, "integratedGstPercentage": 0, "totalUnionTerritoryGst": 0, "unionTerritoryGstPercentage": 0, "totalStateGst": 0, "stateGstPercentage": 0, "totalCentralGst": 0, "centralGstPercentage": 0, "maxRetailPrice": 100, "itemDetailFields": null }, ], "returns": [], "customFieldValues": [], "cancellable": true, "reversePickable": false, "packetConfigurable": false, "cFormProvided": false, "totalDiscount": null, "totalShippingCharges": null, "additionalInfo": null }, "failedOrderFetch": true, "refreshEnabled": true};
// These are the tables I want to show up on the HTML page:
["addresses","saleOrderItems","shippingPackages","saleOrderItems"]
.forEach(mkTable);
function mkTable(prop){
const keys=Object.keys(dat.saleOrderDTO[prop][0]);
document.body.insertAdjacentHTML("beforeend",
`<table><caption>${prop}</caption>`
+"<tr>"+keys.map(k=>`<th>${k}</th>`).join("")+"</tr>"
+dat.saleOrderDTO[prop]
.map(r=>"<tr>"+keys.map(k=>`<td>${r[k]}</td>`).join("")+"</tr>").join("\n")
+"</table>")
}body {font-family:arial}
th, caption {text-align:left; font-weight:900}
caption {color:blue}
table {border-collapse:collapse}
td {border:1px grey solid;}