Nested Array issue - Jquery

Question

I am trying to build an array with JQuery getting the input fields of each div and adding to the array.

This is what I am getting:

content:
0: Array(6)
0: {type: "text", name: "slide-0", value: "1587641472-10398510_1133119167065_2248209_n.jpg"}
1: {type: "text", name: "SlideTitle-0", value: "dasdas"}
2: {type: "textarea", name: "SlideContent-0", value: "DDDDDD"}
3: {type: "text", name: "slide-3", value: "1586431853-homer.gif"}
4: {type: "text", name: "SlideTitle-4", value: "SDSSDSD"}
5: {type: "textarea", name: "SlideContent-5", value: "SDSDSDSDSD"}
1: Array(6)
0: {type: "text", name: "slide-0", value: "1587641472-10398510_1133119167065_2248209_n.jpg"}
1: {type: "text", name: "SlideTitle-0", value: "dasdas"}
2: {type: "textarea", name: "SlideContent-0", value: "DDDDDD"}
3: {type: "text", name: "slide-3", value: "1586431853-homer.gif"}
4: {type: "text", name: "SlideTitle-4", value: "SDSSDSD"}
5: {type: "textarea", name: "SlideContent-5", value: "SDSDSDSDSD"}

and this is what I would like to have:

content:
0: Array(3)
0: {type: "text", name: "slide-0", value: "1587641472-10398510_1133119167065_2248209_n.jpg"}
1: {type: "text", name: "SlideTitle-0", value: "dasdas"}
2: {type: "textarea", name: "SlideContent-0", value: "DDDDDD"}
1: Array(3)
0: {type: "text", name: "slide-3", value: "1586431853-homer.gif"}
1: {type: "text", name: "SlideTitle-4", value: "SDSSDSD"}
2: {type: "textarea", name: "SlideContent-5", value: "SDSDSDSDSD"}

My HTML is:

<div class="form-group _components" data-component="slider" data-count="1"
    id="module-304ccc57-1816-43bc-be85-6c16df5f6687">
    <div class="fieldsWrap">
        <input type="text" class="form-control _content" data-id="module-304ccc57-1816-43bc-be85-6c16df5f6687"
            name="slide-0" value="1587641472-10398510_1133119167065_2248209_n.jpg" readonly="">
        <input type="text" class="form-control _content" data-id="module-304ccc57-1816-43bc-be85-6c16df5f6687"
            name="SlideTitle-0" value="dasdas">
        <textarea class="form-control _content" data-id="module-304ccc57-1816-43bc-be85-6c16df5f6687" type="textarea"
            name="SlideContent-0">DDDDDD</textarea>

    </div>
    <div class="fieldsWrap">
        <input type="text" class="form-control _content" data-id="module-304ccc57-1816-43bc-be85-6c16df5f6687"
            name="slide-3" value="1586431853-homer.gif" readonly="">
        <input type="text" class="form-control _content" data-id="module-304ccc57-1816-43bc-be85-6c16df5f6687"
            name="SlideTitle-4" value="SDSSDSD">
        <textarea class="form-control _content" data-id="module-304ccc57-1816-43bc-be85-6c16df5f6687" type="textarea"
            name="SlideContent-5">SDSDSDSDSD</textarea>
    </div>

and my JQuery is:

let _components = $('div._components');
let component = [];
_components.each(function () {
    let dc = {};
    let inputArray = [];
    dc["content"] = {};
    dc["id"] = $(this).attr('id');
    dc["component"] = $(this).attr('data-component');
    $(this).find('.fieldsWrap').each(function (index) {
         let input;
        $(this).children('input, textarea').each(function () {
            if ($(this).attr('data-id') === $(this).parent().parent().attr('id')) {
                input = {};
                input["type"] = $(this).attr('type');
                input["name"] = $(this).attr('name');
                input['value'] = $(this).val();
                inputArray.push(input);
            }
            dc["content"][index] = inputArray;
        });

    });
});

How can I achieve this in Jquery? I am pretty sure is something silly I am doing... Thanks in advance for the help.

Nishant · Accepted Answer · 2020-06-15 22:01:20Z

You missed out on clearing the array before pushing the new objects in the existing array. Updated the code

let _components = $('div._components');
let component = [];
_components.each(function () {
    let dc = {};
    let inputArray = [];
    dc["content"] = {};
    dc["id"] = $(this).attr('id');
    dc["component"] = $(this).attr('data-component');
    $(this).find(".fieldsWrap").each(function (index) {
         let input, inputArray = [];  //input array needs to emptied here
        $(this).children('input, textarea').each(function () {
            if ($(this).attr('data-id') === $(this).parent().parent().attr('id')) {
                input = {};
                input["type"] = $(this).attr('type');
                input["name"] = $(this).attr('name');
                input['value'] = $(this).val();
                inputArray.push(input);
            }
            dc["content"][index] = inputArray;
        });

    });
});

Collectives™ on Stack Overflow

Nested Array issue - Jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related