CODEWITHSUNDEEP
jquery
user2142185
user2142185

Reputation: 29

Building nested array Jquery

I need help building an array in JQuery.

I want to get the component name and each field inside of it. The HTML is this:

<div class="form-group _components" data-component="generic" id="module-bb3a969f-9029-5b86-8ac0-72180106df93">
    <label for="dynamic_text2">Text Field</label>
    <input type="text" class="form-control _content" data-id="module-bb3a969f-9029-5b86-8ac0-72180106df93"
        name="dynamic_text" value="">
    <input type="text" class="form-control _content" data-id="module-bb3a969f-9029-5b86-8ac0-72180106df93"
        name="dynamic_text2" value="">
</div>
<div class="form-group _components" data-component="generic" id="module-bb3a969f-9029-5b86-8ac0-72180106df93">
    <label for="dynamic_text">Text Field</label>
    <input type="text" class="form-control _content" data-id="module-bb3a969f-9029-5b86-8ac0-72180106df93"
        name="dynamic_text2" value="">
    <input type="text" class="form-control _content" data-id="module-bb3a969f-9029-5b86-8ac0-72180106df93"
        name="dynamic_text2" value="">
</div>

Javascript is:

        let _components = $('div._components');
        let dc = {};

        let dcString;
        let inputArray = [];
        let component = [];
        let input = {};
        _components.each(function () {
            let _input = $(this).children('input');
            console.log(_components.length);

            dc["id"] = $(this).attr('id');
            dc["component"] = $(this).attr('data-component');
            let input = {};
            _input.each(function () {

                if ($(this).attr('data-id') === $(this).parent().attr('id')) {
                    input["type"] = $(this).attr('type');
                    input["name"] = $(this).attr('name');
                    input["value"] = $(this).val();
                    inputArray.push(input);
                    dc["content"] = inputArray;
                } 

            });

            component.push(dc);
        });

My output is:

0:
component: "generic"
content: Array(4)
0: {name: "dynamic_text", type: "text", value: "asdfasd"}
1: {name: "dynamic_text2", type: "text", value: "fasdfasdfasdfadsf"}
2: {name: "dynamic_text", type: "text", value: "fasdfa"}
3: {name: "dynamic_text2", type: "text", value: "sdfasdfafafd"}
length: 4
__proto__: Array(0)
id: "module-bb3a969f-9029-5b86-8ac0-72180106df93"
__proto__: Object
1:
component: "generic"
content: Array(4)
0: {name: "dynamic_text", type: "text", value: "asdfasd"}
1: {name: "dynamic_text2", type: "text", value: "fasdfasdfasdfadsf"}
2: {name: "dynamic_text", type: "text", value: "fasdfa"}
3: {name: "dynamic_text2", type: "text", value: "sdfasdfafafd"}
length: 4
__proto__: Array(0)
id: "module-bb3a969f-9029-5b86-8ac0-72180106df93"

Which is not what I am looking for as it adds fields that don't belong to the component.

How can I build this array adding just the content fields of the specific component? Thanks

Upvotes: 1

Views: 25

Answers (1)

fdomn-m
fdomn-m

Reputation: 28611

You only (ever) have one inputArray so each time you 

inputArray.push(input)

you're adding to the same inputArray - and dc["content"] points to that one array (you don't get a copy with dc["content"] = inputArray, it points to the same array) - so all of your dc.content point to the same array and all have 4 entries.

In general, keep all the let= to the narrowest scope, in this case, move let inputArray=[] (new array) inside the _components.each

_components.each(function() {
  let _input = $(this).children('input');
  let inputArray = [];

Updated fiddle: https://jsfiddle.net/rny4op0x/

Upvotes: 1

Related Questions