best way to structure JS data jQuery multiple classes multi dimensional array

Question

I have two pieces of content: one for employment history, and one for address history.

Given that a person can have multiple forms for employment history (if they have been at more than 1 employer) or address history, I have the option there to click a plus symbol to add a form.

Thus, I have an .click() event handler that when clicked appends a new form.

I have structured the data like this in JS and POSTed it to the server, except I'm having trouble doing this. I must insert a record for each index in employment or address.

var contents = {
    employment: {
        df1e: [

        ],
        dt1e: [

        ],
        c1e: [

        ],
        p1e: [

        ],
        l1e: [

        ]
    },
    address: {
        df1a: [

        ],
        dt1a: [

        ],
        sa1a: [

        ],
        c1a: [

        ],
        st1a: [

        ],
        zc1a: [

        ],
    },
    name: $('#first_name').val() + ' ' + $('#last_name').val()
};

I then wrote $.each() functions for each element and added them to the contents array. Ex (except for each damn one):

$('.df1e').each(function(i, obj) {
    contents.employment.df1e[i] = this.value;
});

There must be a better way to do this. How can I do this without too much trouble?

<?php

$data = json_decode(file_get_contents('php://input'), true);

if($data) {
        foreach($data['employment'] as $employment) {
            $bean->name = $data['name'] . ' - Employment';
            $bean->type_c = 'Employment';
            $bean->date_from_c = $employment['df1e'];
            $bean->date_to_c = $employment['dt1e'];
            $bean->company_c = $employment['c1e'];
            $bean->position_c = $employment['p1e'];
            $bean->location_c = $employment['l1e'];

            $bean->save();
        }

        foreach($data['address'] as $address) {
            $bean->name = $data['name'] . ' - Address';
            $bean->type_c = 'Address';
            $bean->date_from_c = $address['df1a'];
            $bean->date_to_c = $address['dt1a'];
            $bean->street_address_city_c = $address['c1a'];
            $bean->street_address_state_c = $address['st1a'];
            $bean->street_address_postalcode_c = $address['zc1a'];
            $bean->street_address_c = $address['sa1a'];

            $bean->save();
        }
}

echo json_encode(array('response' => $data));

Ignore the bean stuff -- it's SugarCRM's API. It's the same thing as inserting into MySQL.

Your missing some code here buddy please post all the information like what you tried and any error message you have encountered — Sebastien
– Sebastien, Commented Aug 1, 2014 at 20:26
So you just have a form, which takes user input and has the ability to add more sections to the form (multiple places for previous employment, etc.)? You will then need to ship the form to the backend and you want a good way to structure you sent data? — Dennis Martinez
– Dennis Martinez, Commented Aug 1, 2014 at 20:37
@DennisMartinez Yes. I need to collect all of the data and structure it so it's ready to be inserted via PHP. What's the best way to do this and insert it on the backend? — user3817533
– user3817533, Commented Aug 1, 2014 at 20:40
In the database a record should be inserted whether it's employment or address, and I have a type column in the DB that should be equal to whatever the type of history record is. — user3817533
– user3817533, Commented Aug 1, 2014 at 20:43

foxygen · Accepted Answer · 2014-08-01 21:18:23Z

1

First of all, the keys in your object (df1e, dt1e, etc) are very cryptic, so it's impossible to tell exactly what you're doing. But the best way to save multiple addresses and employment details is to use an array of objects (i.e. addresses would be an array of objects, and employers would be an array of objects). Your end product would look something like this:

    {
        "addresses": [
            {
                "street" : "123 fake street",
                "city"   : "New York",
                "state"  : "NY",
                "zip"    : "xxxxx"
            },
            {
                "street" : "910 fake lane",
                "city"   : "San Francisco",
                "state"  : "CA",
                "zip"    : "xxxxx"
            }
        ],
        "employers": [
            {
                "name"   : "stackoverflow",
                "street" : "110 William Street",
                "city"   : "New York",
                "state"  : "NY",
                "zip"    : "10038"
            },
            {
                "name"   : "google",
                "street" : "345 Spear St, Floors 2-4",
                "city"   : "San Franciso",
                "state"  : "CA",
                "zip"    : "94105"
            }
        ]
    }

Here's an example for the addresses, but the employer section would look the same. Assuming each address entry (which includes city, state, zip, etc) is a container with the class 'address-entry', you could build the addresses array like this.

var addresses = [];

$('.address-entry').each(function(){

        var street = $(this).find('.street').val();
        var city   = $(this).find('.city').val();
        // etc - get the other values you need

       // once you have your values, 'push' an object to the addresses array
       addresses.push({

           "street" : street,
           "city"   : city,
           // etc

       });

});

// do the same for employers

// if you want it all in one object, do this
var content = {"addresses": addresses, "employers": employers};

Now your ready to submit. If you are using ajax, it's simple:

$.ajax({
    url: 'whatever.php',
    type: 'POST',
    data: content,
    success: function(resp){ console.log(resp); },
    error: function(xhr){ console.log(xhr.responseText); }
});

If you're not using ajax, just append the result of JSON.stringify(content) to your form, and since you are using php on your server, call:

$addresses = json_decode($_POST['addresses'], true);
$employers = json_decode($_POST['employers'], true);

from your php script

Edit: spelling

edited Aug 1, 2014 at 21:18

answered Aug 1, 2014 at 20:50

foxygen

1,3881 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3817533 Over a year ago

How would I go about getting this data into the array?

user3817533 Over a year ago

I put it in a foreach loop on the server-side and it doesn't insert each record. I have foreach($data['employment'] as $emp) {} and foreach($data['address'] as $addr) {} and an insert statement in each.

foxygen Over a year ago

Where are you getting $data from? I didn't use a variable by that name. And when you say it "doesn't insert", what do you mean? Are you getting a db error? Are the arrays empty? Please be more specific

foxygen Over a year ago

man, if you can't follow advice - I can't help you. Just access the post data from the $_POST array like I said, and iterate over those two variables in my answer ($addresses and $employers).

user3817533 Over a year ago

That's what I'm doing.

Collectives™ on Stack Overflow

best way to structure JS data jQuery multiple classes multi dimensional array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related