how to check index of object in javascript?

Question

I want to create html form using Javascript as below code

But I don't know to make conditional for separate which one is Input, textarea, I'm not yet sure this good or not to generate form by using JS please help to tell me some idea. here is my object

formelement : {
        input: {
             a: {type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'},
             b: {type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'},
             c: {type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'},
             d: {type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'},
             e: {type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'},
             f: {type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'},
             g: {type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'}
     },

},

  ,
 textarea: {
      type: 'password',
      name: 'password',
      class: 'form-control',
      Id: 'password',
      placeholder: 'placeholder'
 },

},

So I want to check up which one is input and textarea

function formelement(data) {

    var items = '';
    if (data.formelement =='input') {

        console.log(data);

        //$.each(data.formelement, function (ins, vals) {
        //    console.log(vals.type);
        //    items += '<div class="form-group"> <input type='+vals.type+' name='+vals.name+' class='+vals.class+' id='+vals.Id+' placeholder='+vals.placeholder+'></div>';
        //});
    }else{
         this is for textarea
         }
    return items;
}

Possible duplicate of [How to find element type in JQuery](http://stackoverflow.com/questions/9188510/how-to-find-element-type-in-jquery) — rmondesilva, Mar 18 '16 at 05:44

Ranish Karim · Accepted Answer · 2016-03-18T07:21:18.473

Try this. it might solve your problem

function formelement(data) {

    var items = '';
    for (var key in data.formelement) {
        if (key == 'input') {

            console.log(data.formelement[key]);

            //$.each(data.formelement, function (ins, vals) {
            //    console.log(vals.type);
            //    items += '<div class="form-group"> <input type='+vals.type+' name='+vals.name+' class='+vals.class+' id='+vals.Id+' placeholder='+vals.placeholder+'></div>';
            //});
        } else {
           //this is for textarea
        }
    }
    return items;
}

Updated Answer

The above solution won't work if you have multiple Input key as associative array don't allow duplicate key. I would suggest you make array like this.

 var formelement = {
    input: [{type: 'password', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'},
        {type: 'text', name: 'password', class: 'form-control', Id: 'password', placeholder: 'placeholder'}],
    textarea: [{
        type: 'password',
        name: 'password',
        class: 'form-control',
        Id: 'password',
        placeholder: 'placeholder'
    }]
}

and then change above function like this.

function formelement(data) {

    var items = '';
    for (var key in data.formelement) {
        if (key == 'input') {
            var inputFields = data.formelement[key];
            for (var i = 0; i <inputFields.length; i++) {
                console.log(inputFields[i]);

                //$.each(data.formelement, function (ins, vals) {
                //    console.log(vals.type);
                //    items += '<div class="form-group"> <input type='+vals.type+' name='+vals.name+' class='+vals.class+' id='+vals.Id+' placeholder='+vals.placeholder+'></div>';
                //});
            }
        } else {
            //this is for textarea
        }
    }
    return items;
}

Is it a problem or not if I using Jquery getscript and I just another function inside loaded script to generate HTM form ? It will bad practice or bad for performance or not? — DMS-KH, Mar 18 '16 at 05:59
It is not work when I have two of input please help mean that it will return only one input but another missing — DMS-KH, Mar 18 '16 at 06:30
Actually problem is with your approach. You can not add duplicate key in associate array. You need to make html form using some other technique. Associative array work like key-value pair — Ranish Karim, Mar 18 '16 at 07:13
Yes I got, But now dose JS have any solution for get all input object without using it index (a,b.....). because I want to generate form — DMS-KH, Mar 18 '16 at 07:20
I have just make array of input. Through this you can add multiple input or textarea field in array. — Ranish Karim, Mar 18 '16 at 07:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/106682/discussion-between-heng-sopheak-and-ranish-karim). — DMS-KH, Mar 18 '16 at 07:34

score 0 · Answer 2 · answered Mar 18 '16 at 06:10

If you want to go over properties then and use Javascript to generate HTML then

let formelement = data => {
    let items = '';
    Object.entries(data.formelement).forEach(([key, value]) => {
        if (key === 'input') {
            items += `<div class="form-group"><input type="${value.type}" name="${value.name}" class="${value.class}" id="${value.Id}" placeholder="${value.placeholder}"></div>`;
        } else if (key === 'textarea') {
            //do something for textarea
            // value is equal to formelement.textarea
        }
    });
    return items;
};

I'll recommend against using JS to generate HTML as you need to write separate code for each type of element. You can try using template tag.

https://developer.mozilla.org/en/docs/Web/HTML/Element/template

how to check index of object in javascript?

2 Answers2