Assigning attributes from an array

Question

I am trying to build a form based off of column names I get from a PHP script, through AJAX, and a pre-defined array of column details. I am hoping to assign these pre-defined attributes to the incoming columns and build a form. For example, if I ever get the column "UserName" I want to to always be an < input >

The template

var template = {
  UserName : {
                label: "User Name:",
                type: "input"
  }
  UserId : {
              label: "User Id:",
              type: "text"
  }
}

Incoming JSON array from AJAX request

{"UserName":"bob", "UserId":"1"}

Now I need to somehow 'match' these. I myself am not sure exactly what to do here.

$.each(data, function(i,e){
  // if index (such as UserName) is found in template array, maybe add the attributes to it?
});

Ohgodwhy · Accepted Answer · 2014-11-02 21:09:19Z

1

For your case, use obj.hasOwnProperty(key) to test if it exists, concatenate a string and use a ternary assignment to build a input element. You could also use an if statement if you wished.

var $html = '';
$.each(data, function(idx,v){
    $html += template.hasOwnProperty(idx)? '<input type="'+template[idx]['type']+'" name="'+idx+'"/>': '';
});
console.log($html);

Here's your jsFiddle

answered Nov 2, 2014 at 21:09

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

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

6 Comments

user3822370 Over a year ago

If my JSON looks more like [{"UserName":"Bob","UserId":"1"}] I guess it is necessary to use two $.each statements to get to the element "UserName" ?

Ohgodwhy Over a year ago

@user3822370 No. That is an array of objects. You should have multiple objects stored in the array, not an array for each object. That will make messy code. With your existing example, use: $.each(data[0], function(idx, v){

user3822370 Over a year ago

Yeah unfortunately when I send my JSON data from PHP, I have to break the assoc array and rebuild it (so I can encode BLOBs). So it ends up coming back nested like that.. [ {}, {}... ]

Ohgodwhy Over a year ago

@user3822370 Yes, that's fine. You can iterate the existing array using the same methodology, $.each(data[0], function(idx, obj){ now we're iterating the array. Then If you want to iterate each object, it's $.each(obj, function(i, v){

user3822370 Over a year ago

Just wondering, are nested each and even for loops inefficient?

|

Kolban · Accepted Answer · 2014-11-02 21:15:56Z

An alternative (and perhaps wordier) solution including label processing might be shown in this jsFiddle. The high level is based on the following code:

$(function () {
    var template = {
        UserName: {
            label: "User Name:",
            type: "input"
        },
        UserId: {
            label: "User Id:",
            type: "text"
        }
    };
    var data = {
        "UserName": "bob",
        "UserId": "1"
    };
    $.each(data, function (key, value) {
        if (template[key] != undefined) {
            $("#here").append($("<span>" + template[key].label + "</span>"));
            $("#here").append($("<input type=\"" + template[key].type + "\">"));
            $("#here").append($("<br>"));
        }
    });
});

Collectives™ on Stack Overflow

Assigning attributes from an array

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related