CODEWITHSUNDEEP
javascriptjqueryjquery-selectors
Aesreal
Aesreal

Reputation: 131

Jquery push multiple selectors into an object at once

I'm trying to push the name and diet fields into a single object at once such that it console.log out something like

group1: Array[some number]
    [0]: Object
        diet: "some diet"
        name: "some name"
    [1]: Object
        diet: "some other diet"
        name: "some other name"

group2: Array[some number]
    [0]: Object
        diet: "some diet"
        name: "some name"
    [1]: Object
        diet: "some other diet"
        name: "some other name"
    [2]: Object
        diet: "another diet"
        name: "another name"
    so on....

However, I'm getting some logic error that causes the console.log to be this:

group1: Array[some number]
    [0]: Object
        diet: undefined
        name: "some name"
    [1]: Object
        diet: undefined
        name: "some other name"

group2: Array[some number]
    [0]: Object
        diet: undefined
        name: "some name"
    [1]: Object
        diet: undefined
        name: "some other name"
    [2]: Object
        diet: undefined
        name: "another name"
    so on....

I'm relatively new to jquery/javascript and php (3 weeks so don't stab me too much) and afaics there doesn't seem to be any problem with it. How can I solve this?

This is my code:

var tso = {
            group1: [],
            group2: [],
            ogroup: [],
            igroup: [],
            others: []
        };

for (var k in tso) {
    if (tso.hasOwnProperty(k)) {
        var nameField = $("input[id*="+k+"]");
        var dietField = $("select[id*="+k+"] option:selected");
        $.each($(nameField, dietField), function() {
            tso[k].push({name: $(this).closest('input').val(), diet: $(this).closest('select').val()});
        });
    }
};

console.log(tso);

Upvotes: 0

Views: 928

Answers (2)

Aesreal
Aesreal

Reputation: 131

Alright, played around more and found a method to do this. As I have an equal number of input and select elements, I could just iterate through which ever element comes first. In my case, input is always before the select element, hence I can just use the .next() command to get the next element.

for (var k in tso) {
    if (tso.hasOwnProperty(k)) {
        $("input[id*="+k+"]").each(function() {
            tso[k].push({name: $(this).val(), diet: $(this).next().val()});
        });
    }
};

This consoles out

group1: Array[some number]
    [0]: Object
        diet: "American"
        name: "some name"
    [1]: Object
        diet: "Western"
        name: "some other name"

group2: Array[some number]
    [0]: Object
        diet: "Asian"
        name: "some name"
    [1]: Object
        diet: "No preference"
        name: "some other name"
    [2]: Object
        diet: "Vegetarian"
        name: "another name"
so on....

In the event that the elements are not next to each other, you can use .nextUntil("selector") to select the next input/select/element

Upvotes: 0

NSS
NSS

Reputation: 153

Try doing for as below:

for (var k in tso) {
    if (tso.hasOwnProperty(k)) {
        var nameField = $("input[id*="+k+"]").val();
        var dietField = $("select[id*="+k+"]").val();        
        tso[k].push({name: nameField, diet: dietField });
    }
}

Upvotes: 1

Related Questions