jquery - Parsing Duplicatable Form's JSON data to PHP for Mail

Question

I have a form where there are duplicate-able fields and it produces the following JSON data:

{
    "mainmember": [
        {
            "name": "testtest",
            "surname": "test",
            "id": "8509295266086",
            "age": "27",
            "gender": "Male",
            "townofbirth": "george",
            "email": "[email protected]",
            "contact": "0112121211",
            "passport": "1111111111111",
            "postal": "grjiubrwg",
            "postal_code": "0010",
            "residential": "tytyytyttyytyt",
            "residential_code": "4422"
        }
    ],
    "dependant1": [
        {
            "name": "testDUP",
            "surname": "testDUP",
            "id": "4802235040081",
            "age": "64",
            "gender": "Male",
            "townofbirth": "tehjte",
            "cell": "4774811845",
            "email": "testDUP",
            "passport": "8202255133088",
            "relationship": "spouse"
        }
    ],
    "dependant2": [
        {
            "name": "testDUP2",
            "surname": "testDUP2",
            "id": "1111111111111",
            "age": "45",
            "gender": "F",
            "townofbirth": "knysnasw",
            "cell": "0000000000",
            "email": "testDUP2",
            "passport": "2222222222222",
            "relationship": "inlaw"
        }
    ]
}

now the duplicate-able fields are the dependants, in this JSON there's 2 dependant but on duplication it increases to "dependant3, dependant4, dependant5".

Currently when i submit and send to PHP i can count the dependants:

    <?php
$json = $_POST['parameters'];
$json_string = stripslashes($json);
$data = json_decode($json_string, true);

$datasetCount = count($data); // returns count of array items of any array
echo "<h1>There are $datasetCount Dependants</h1>";

$i = 0;
foreach ($data as $each_dep) {
    $i++;
    echo "<h2>Dependant $i</h2>";
    while (list($key, $value) = each ($each_dep)) {

        echo "$key: $value<br />";

    }

}

?>

and the jQuery send function I'm using:

jQuery('#submit').click(function(){
    jQuery('div[class*="mainmember"]').each(function(k, v){
        mainmember = {};
        mainmember['id'] = ''; 
        $(v).find('.id').each(function(){
          mainmember['id'] += $(this).val(); 
        });
        mainmember['age'] = ''; 
        $(v).find('.age').each(function(){
          mainmember['age'] += $(this).val(); 
        });
        mainmember['gender'] = $(v).find('.gender').val();
        result['mainmember'] = [mainmember];

    });
    jQuery('div[class*="dependant"]').each(function(k, v){
        dep_counter++
        dependants = {};
        result['dependant'+dep_counter] = [dependants];
        dependants['id'] = ''; 
        $(v).find('.id').each(function(){
          dependants['id'] += $(this).val(); 
        });
        dependants['age'] = ''; 
        $(v).find('.age').each(function(){
          dependants['age'] += $(this).val(); 
        });
        dependants['gender'] = $(v).find('.gender').val();
    });
    var jsonData = JSON.stringify(result);

    console.log(jsonData);
});

I just cant get the other data, such as name, surname etc. I need to parse it like this to an email:

Main Member: details

Dependant 2: details

Dependant 3: details

Any Help greatly appreciated.

Answer 1

Your json structure is quite painful, you seem to be creating arrays of a single object. Instead you should have arrays of objects, or single objects referenced by keys.

Ideally for your structure, I think you should have an array of objects for the dependents and a single object for the mainmember, like this:

{
    "mainmember": {
        "name": "test2",
        "id": "1111111111111",
        "age": "45",
        "gender": "M",
        "townofbirth": "knysna",
        "email": "tjyrrtjhe",
        "contact": "1111111111",
        "passport": "5555555555555",
        "postal": "yrtjyt",
        "postal_code": "1101",
        "residential": "tkyutk",
        "residential_code": "5555"
    },
    "dependants": [
        {
            "name": "dtjtet",
            "surname": "grwwr",
            "id": "1111222222222",
            "age": "48",
            "gender": "F",
            "townofbirth": "knmysn",
            "cell": "0045128588",
            "email": "[email protected]",
            "passport": "1212112111111",
            "relationship": "spouse"
        },
        {
            "name": "dtjtet2",
            "surname": "grwwr2",
            "id": "11112222222222",
            "age": "44",
            "gender": "M",
            "townofbirth": "knmysn",
            "cell": "0045128588",
            "email": "[email protected]",
            "passport": "1212112111111",
            "relationship": "spouse"
        }
    ]
}

This way you have a single "mainmember" object, and an array of dependents.

Then with php code like the following you can print the details for it:

<?php
function printMember($member) {
    foreach($member as $key=>$value) {
        echo "$key : $value <br />";
    }
}


$json = $_POST['parameters'];
$json_string = stripslashes($json);
$data = json_decode($json_string, true);

$depCount = count($data["dependants"]);
echo "<h1>There are $depCount Dependants</h1>";

echo "<h2>Main member data:</h2>";
printMember($data["mainmember"]);

foreach ($data["dependants"] as $index => $dependant) {

    echo "<h2>Dependant $index</h2>";
    printMember($dependant);

}

To create the correct json structure in the jquery code, something like this:

jQuery('#submit').click(function(){
    jQuery('div[class*="mainmember"]').each(function(k, v){
        mainmember = {};
        mainmember['id'] = ''; 
        $(v).find('.id').each(function(){
          mainmember['id'] += $(this).val(); 
        });
        mainmember['age'] = ''; 
        $(v).find('.age').each(function(){
          mainmember['age'] += $(this).val(); 
        });
        mainmember['gender'] = $(v).find('.gender').val();
        //This is changed: Remove the [] from around the mainmember, 
        //should be a single object not an array
        result['mainmember'] = mainmember;

    });

    //create the array of dependants
    result['dependants'] = [];
    jQuery('div[class*="dependant"]').each(function(k, v){
        dependant = {};
        dependant['id'] = ''; 
        $(v).find('.id').each(function(){
          dependant['id'] += $(this).val(); 
        });
        dependant['age'] = ''; 
        $(v).find('.age').each(function(){
          dependant['age'] += $(this).val(); 
        });
        dependant['gender'] = $(v).find('.gender').val();

        //add the dependant to the array
        result['dependants'].push(dependant);
    });
    var jsonData = JSON.stringify(result);

    console.log(jsonData);
});

This is untested but should help you proceed. Your problem is because you are using arrays of single objects instead of the object itself.