Kemas kini medan dalam permintaan AJAX POST

Question

Saya cuba mengemas kini medan tersuai secara dinamik dalam permintaan AJAX POST menggunakan jQuery atau Javascript.

Permintaan AJAX POST dimiliki oleh pemalam Kalendar Amelia pada platform WordPress.

Ini adalah permintaan AJAX POST

"type": "appointment",
    "appointment": {
        "id": 2,
        "bookings": [
            {
                "id": 2,
                "customerId": 4,
                "customer": {
                    "id": 4,
                    "firstName": "John",
                    "lastName": "Doe",
                    "birthday": null,
                    "email": "[email protected]",
                    "phone": "+447123456789",
                    "type": "customer",
                    "status": null,
                    "note": null,
                    "zoomUserId": null,
                    "countryPhoneIso": "gb",
                    "externalId": 3,
                    "pictureFullPath": null,
                    "pictureThumbPath": null,
                    "translations": "{\"defaultLanguage\":\"en_US\"}",
                    "gender": null
                },
                "status": "approved",
                "extras": [],
                "couponId": null,
                "price": 100,
                "coupon": null,
                "customFields": "{\"1\":{\"label\":\"Test Field 1\",\"type\":\"text\",\"value\":\"Test Field 1\"},\"2\":{\"label\":\"Test Field 2\",\"type\":\"text\",\"value\":\"Test Field 2\"}}",
                "info": "{\"firstName\":\"John\",\"lastName\":\"Doe\",\"phone\":\"+447123456789\",\"locale\":\"en_US\",\"timeZone\":\"Europe\/London\",\"urlParams\":null}",
                "appointmentId": 2,
                "persons": 1,
                "token": "127ce49924",
                "payments": [
                    {
                        "id": 2,
                        "customerBookingId": 2,
                        "packageCustomerId": null,
                        "parentId": null,
                        "amount": 0,
                        "gateway": "onSite",
                        "gatewayTitle": "",
                        "dateTime": "2023-05-08 10:00:00",
                        "status": "pending",
                        "data": "",
                        "entity": "appointment",
                        "created": null,
                        "actionsCompleted": null,
                        "wcOrderId": null,
                        "wcOrderUrl": null,
                        "wcItemCouponValue": null,
                        "wcItemTaxValue": null
                    }
                ],
                "utcOffset": null,
                "aggregatedPrice": true,
                "isChangedStatus": null,
                "isLastBooking": null,
                "packageCustomerService": null,
                "ticketsData": [],
                "duration": 1800,
                "created": null,
                "actionsCompleted": false
            }
        ],
        "notifyParticipants": 1,
        "internalNotes": null,
        "status": "approved",
        "serviceId": 1,
        "parentId": null,
        "providerId": 1,
        "locationId": null,
        "provider": null,
        "service": null,
        "location": null,
        "googleCalendarEventId": null,
        "googleMeetUrl": null,
        "outlookCalendarEventId": null,
        "zoomMeeting": null,
        "lessonSpace": null,
        "bookingStart": "2023-05-08 10:00:00",
        "bookingEnd": "2023-05-08 10:30:00",
        "type": "appointment",
        "isRescheduled": null,
        "resources": []
    },
    "booking": {
        "id": 2,
        "customerId": 4,
        "customer": {
            "id": 4,
            "firstName": "John",
            "lastName": "Doe",
            "birthday": null,
            "email": "[email protected]",
            "phone": "+447123456789",
            "type": "customer",
            "status": null,
            "note": null,
            "zoomUserId": null,
            "countryPhoneIso": "gb",
            "externalId": 3,
            "pictureFullPath": null,
            "pictureThumbPath": null,
            "translations": "{\"defaultLanguage\":\"en_US\"}",
            "gender": null
        },
        "status": "approved",
        "extras": [],
        "couponId": null,
        "price": 100,
        "coupon": null,
        "customFields": "{\"1\":{\"label\":\"Test Field 1\",\"type\":\"text\",\"value\":\"Test Field 1\"},\"2\":{\"label\":\"Test Field 2\",\"type\":\"text\",\"value\":\"Test Field 2\"}}",
        "info": "{\"firstName\":\"John\",\"lastName\":\"Doe\",\"phone\":\"+447123456789\",\"locale\":\"en_US\",\"timeZone\":\"Europe\/London\",\"urlParams\":null}",
        "appointmentId": 2,
        "persons": 1,
        "token": "127ce49924",
        "payments": [
            {
                "id": 2,
                "customerBookingId": 2,
                "packageCustomerId": null,
                "parentId": null,
                "amount": 0,
                "gateway": "onSite",
                "gatewayTitle": "",
                "dateTime": "2023-05-08 10:00:00",
                "status": "pending",
                "data": "",
                "entity": "appointment",
                "created": null,
                "actionsCompleted": null,
                "wcOrderId": null,
                "wcOrderUrl": null,
                "wcItemCouponValue": null,
                "wcItemTaxValue": null
            }
        ],
        "utcOffset": null,
        "aggregatedPrice": true,
        "isChangedStatus": null,
        "isLastBooking": null,
        "packageCustomerService": null,
        "ticketsData": [],
        "duration": 1800,
        "created": null,
        "actionsCompleted": false
    },
    "utcTime": [
        {
            "start": "2023-05-08 10:00:00",
            "end": "2023-05-08 10:30:00"
        }
    ],
    "appointmentStatusChanged": false,
    "recurring": [],
    "package": [],
    "packageId": null,
    "customer": {
        "id": 4,
        "firstName": "John",
        "lastName": "Doe",
        "birthday": null,
        "email": "[email protected]",
        "phone": "+447123456789",
        "type": "customer",
        "status": null,
        "note": null,
        "zoomUserId": null,
        "countryPhoneIso": "gb",
        "externalId": 3,
        "pictureFullPath": null,
        "pictureThumbPath": null,
        "translations": "{\"defaultLanguage\":\"en_US\"}",
        "gender": null,
        "locale": "en_US",
        "timeZone": "Europe/London"
    },
    "bookable": {
        "id": 1,
        "name": "Test Service 1",
        "description": "",
        "color": "#1788FB",
        "price": 100,
        "deposit": 0,
        "depositPayment": "disabled",
        "depositPerPerson": true,
        "pictureFullPath": null,
        "pictureThumbPath": null,
        "extras": [],
        "coupons": [],
        "position": null,
        "settings": "{\"payments\":{\"paymentLinks\":{\"enabled\":false,\"changeBookingStatus\":false,\"redirectUrl\":null},\"onSite\":true,\"payPal\":{\"enabled\":false},\"stripe\":{\"enabled\":false},\"mollie\":{\"enabled\":false},\"razorpay\":{\"enabled\":false}},\"zoom\":{\"enabled\":false},\"lessonSpace\":{\"enabled\":false}}",
        "fullPayment": false,
        "minCapacity": 1,
        "maxCapacity": 1,
        "duration": 1800,
        "timeBefore": null,
        "timeAfter": null,
        "bringingAnyone": true,
        "show": true,
        "aggregatedPrice": true,
        "status": "visible",
        "categoryId": 1,
        "category": null,
        "priority": [],
        "gallery": [],
        "recurringCycle": null,
        "recurringSub": null,
        "recurringPayment": 0,
        "translations": null,
        "minSelectedExtras": null,
        "mandatoryExtra": null,
        "customPricing": "{\"enabled\":false,\"durations\":{}}",
        "maxExtraPeople": null,
        "limitPerCustomer": "{\"enabled\":false,\"numberOfApp\":1,\"timeFrame\":\"day\",\"period\":1,\"from\":\"bookingDate\"}"
    },
    "paymentId": 2,
    "packageCustomerId": null,
    "payment": {
        "id": 2,
        "customerBookingId": 2,
        "packageCustomerId": null,
        "parentId": null,
        "amount": 0,
        "gateway": "onSite",
        "gatewayTitle": "",
        "dateTime": "2023-05-08 10:00:00",
        "status": "pending",
        "data": "",
        "entity": "appointment",
        "created": null,
        "actionsCompleted": null,
        "wcOrderId": null,
        "wcOrderUrl": null,
        "wcItemCouponValue": null,
        "wcItemTaxValue": null
    },
    "customerCabinetUrl": ""
}

Apabila saya mendarat di halaman sebelum pengguna menekan hantar, saya ingin mengemas kini medan berikut menggunakan jQuery atau Javascript yang menyatakan Test Field 1 和 Test Field 2:

"customFields": "{"1":{"label":"测试字段 1","type":"text","value": "测试字段 1"},"2":{"标签":"测试字段 2","类型":"文本","值":"测试字段2"}}"

Antara muka pengguna kelihatan seperti ini:

Answer 1

Saya rasa anda perlu menghuraikan rentetan JSON sedia ada ke dalam objek. Selepas itu, ubah suai medan yang diperlukan dalam objek. Akhir sekali, tukar objek yang diubah suai kembali kepada rentetan JSON.

const postData = JSON.parse(/* your JSON here */);

// the fields in the object
postData.appointment.bookings[0].customFields["1"].value = "Updated Field 1";
postData.appointment.bookings[0].customFields["2"].value = "Updated Field 2";

// Convert the modified object back to a JSON string
const updatedJSON = JSON.stringify(postData);

console.log(updatedJSON);