Update fields in AJAX POST request

Question

I'm trying to dynamically update a custom field in an AJAX POST request using jQuery or Javascript.

AJAX POST request belongs to the Amelia Calendar plugin on the WordPress platform.

This is an AJAX POST request

"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": ""
}

When I land on the page before the user presses submit, I want to update the following fields using jQuery or Javascript, which show Test Field 1 and Test Field 2:

"customFields": "{\"1\":{\"label\":\"Test field 1\",\"type\":\"text\",\"value\" :\ "Test Field 1\"},\"2\":{\"Label\":\"Test Field 2\",\"Type\":\"Text\",\"Value\":\ "Test field 2\"}}"

The user interface is as follows:

Answer 1

I think you need to parse the existing JSON string into an object. After that, modify the required fields in the object. Finally, convert the modified object back to a JSON string.

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);