Is this DataTables-friendly JSON format?

Is this DataTables-friendly JSON format?

Rich SimiskerRich Simisker Posts: 5Questions: 2Answers: 0

Hi! I'm trying to load some JSON data from Formidable Forms into an instance of DataTables. I'm not having any success, despite being somewhat familiar with DataTables using ajax.

I've tried via the Formidable Forms API and via a static JSON test file, with similar failure, which makes me suspect the data format.

Before I go into troubleshooting my DataTables instance, I'd like to eliminate any issues with the source data first. So could anyone confirm that the following is a DataTables-friendly JSON format?

{
    "zfzdv": {
        "id": "25",
        "item_key": "zfzdv",
        "name": "Ally Welles",
        "ip": "10.77.196.134",
        "meta": {
            "dt_rowid2": "1",
            "contact-type": "Driver",
            "contact-name": "Ally Welles",
            "contact-name-value": {
                "first": "Ally",
                "last": "Welles"
            },
            "contact-mobile": "07349 805179",
            "contact-phone": "",
            "contact-email": "ally.welles@vaseymail.log",
            "contact-address": "19 Seen Street  Royston Vasey ",
            "contact-address-value": {
                "line1": "19 Seen Street",
                "city": "Royston Vasey",
                "state": "The North"
            },
            "submit7": "",
            "h8yd2": ""
        },
        "form_id": "9",
        "post_id": "0",
        "user_id": "1",
        "parent_item_id": "0",
        "is_draft": "0",
        "updated_by": "1",
        "created_at": "2024-05-01 09:49:30",
        "updated_at": "2024-05-01 09:53:06"
    },
    "kznvt": {
        "id": "26",
        "item_key": "kznvt",
        "name": "Barbara Dixon",
        "ip": "10.77.196.134",
        "meta": {
            "dt_rowid2": "2",
            "contact-type": "Operator Rep",
            "contact-name": "Barbara Dixon",
            "contact-name-value": {
                "first": "Barbara",
                "last": "Dixon"
            },
            "contact-mobile": "",
            "contact-phone": "02770 892905",
            "contact-email": "barbara.dixon@babscabs.log",
            "contact-address": "Bab's Cabs  Royston Vasey ",
            "contact-address-value": {
                "line1": "Bab's Cabs",
                "city": "Royston Vasey",
                "state": "The North"
            },
            "submit7": "",
            "h8yd2": ""
        },
        "form_id": "9",
        "post_id": "0",
        "user_id": "1",
        "parent_item_id": "0",
        "is_draft": "0",
        "updated_by": "1",
        "created_at": "2024-05-01 09:56:15",
        "updated_at": "2024-05-01 09:57:45"
    }
}

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    Answer ✓

    Datatables expects an array of objects where each array element is a row of data. See the data docs and ajax docs for more details. Something like this would work:

    [
        {
            "id": "25",
            "item_key": "zfzdv",
            "name": "Ally Welles",
            "ip": "10.77.196.134",
            "meta": {
                "dt_rowid2": "1",
                "contact-type": "Driver",
                "contact-name": "Ally Welles",
                "contact-name-value": {
                    "first": "Ally",
                    "last": "Welles"
                },
                "contact-mobile": "07349 805179",
                "contact-phone": "",
                "contact-email": "ally.welles@vaseymail.log",
                "contact-address": "19 Seen Street  Royston Vasey ",
                "contact-address-value": {
                    "line1": "19 Seen Street",
                    "city": "Royston Vasey",
                    "state": "The North"
                },
                "submit7": "",
                "h8yd2": ""
            },
            "form_id": "9",
            "post_id": "0",
            "user_id": "1",
            "parent_item_id": "0",
            "is_draft": "0",
            "updated_by": "1",
            "created_at": "2024-05-01 09:49:30",
            "updated_at": "2024-05-01 09:53:06"
        },
        {
            "id": "26",
            "item_key": "kznvt",
            "name": "Barbara Dixon",
            "ip": "10.77.196.134",
            "meta": {
                "dt_rowid2": "2",
                "contact-type": "Operator Rep",
                "contact-name": "Barbara Dixon",
                "contact-name-value": {
                    "first": "Barbara",
                    "last": "Dixon"
                },
                "contact-mobile": "",
                "contact-phone": "02770 892905",
                "contact-email": "barbara.dixon@babscabs.log",
                "contact-address": "Bab's Cabs  Royston Vasey ",
                "contact-address-value": {
                    "line1": "Bab's Cabs",
                    "city": "Royston Vasey",
                    "state": "The North"
                },
                "submit7": "",
                "h8yd2": ""
            },
            "form_id": "9",
            "post_id": "0",
            "user_id": "1",
            "parent_item_id": "0",
            "is_draft": "0",
            "updated_by": "1",
            "created_at": "2024-05-01 09:56:15",
            "updated_at": "2024-05-01 09:57:45"
        }
    ]
    

    Kevin

  • Rich SimiskerRich Simisker Posts: 5Questions: 2Answers: 0

    Thanks for a speedy reply, Kevin :)

    So there's no way that DataTables can accommodate the unique 5-char keys, then?

    Bah, this was what I was fearing, as I was hoping to incorporate Editor and have the ability to send updated/new data back to Formidable Forms via API. Obviously stripping the keys is going to make that impossible.

    I'm slightly surprised by this, given all the other amazing things that DataTables can do, but I'm sure there are good reasons!

    Oh well, back to the drawing board. Thanks again.

  • kthorngrenkthorngren Posts: 21,343Questions: 26Answers: 4,954
    Answer ✓

    Datatables expects each row to be an array element. With my change to the structure you could use rowId and idSrc as the item_key property. You can use ajax.dataSrc to convert the JSON response to one that Datatables supports.

    You can use events like preSubmit to modify the Editor's sent data to format it to support the Formidable structure. Then use postSubmit to convert it back to a format the Editor supports. See the Editor client/server data docs for details.

    TL;DR you could use Editor and Datatables by manipulating the JSON data to the format supported by both Formidable and Datatables/Editor.

    Kevin

  • Rich SimiskerRich Simisker Posts: 5Questions: 2Answers: 0

    Thanks once more for the guidance!

    I did consider that some sort of on-the-fly restructuring could work, but I think that's beyond my capabilities [I'm more of a designer than a developer].

    I will look into what you've suggested, though. Much appreciated :)

Sign In or Register to comment.