how to flatten nested nested array of objects

Question

I am building a input application for subdivision data. each subdivision can have 1 to n of sections. my goal is to dynamically populate the ui with the needed inputs, textboxes, radios, checkboxes, etc.. I am combining the data from multiple sources into a single array. since this is dynamic i have created services to change the models to unique names. a screen shot of what it looks like right now

the issue i need help with is the checkboxes. I cannot access them from the html. here is a example of how i am accessing a nested array. this works fine.

 <tbody>
            <tr ng-repeat="item in section.sectionBuilderDeveloper">
                <td class="bd-td">{{item.type}}</td>
                <td>{{item.name}}</td>
                <td class="radio-td">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="{{item.idStatus1}}" value="{{item.value1}}" ng-model="model[item.status]">
                        <label for="{{item.forStatus1}}"> Y </label>
                    </div>
                    <div class="radio radio-inline">
                        <input type="radio" id="{{item.idStatus2}}" value="{{item.value2}}" ng-model="model[item.status]">
                        <label for="{{item.forStatus2}}"> N </label>
                    </div>
                </td>
                <td class="radio-td">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="{{item.idPriceList1}}" value="{{item.value1}}" ng-model="model[item.priceList]">
                        <label for="{{item.forPriceList1}}"> Y </label>
                    </div>
                    <div class="radio radio-inline">
                        <input type="radio" id="{{item.idPriceList2}}" value="{{item.value2}}" ng-model="model[item.priceList]">
                        <label for="{{item.forPriceList2}}"> N </label>
                    </div>
                </td>
                <td class="radio-td">
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="{{item.idInvSheet1}}" value="{{item.value1}}" ng-model="model[item.invSheet]">
                        <label for="{{item.forInvSheet1}}"> Y </label>
                    </div>
                    <div class="radio radio-inline">
                        <input type="radio" id="{{item.idInvSheet2}}" value="{{item.value2}}" ng-model="model[item.invSheet]">
                        <label for="{{forInvSheet2}}"> N </label>
                    </div>
                </td>
            </tr>
        </tbody>

I need to do the same thing with the checkboxes. this does not work.

 <tbody>
            <tr>
                <td style="border-top:none" nowrap align="center" ng-repeat="checkbox in section.sectionFutureCheckboxes">
                    <div class="checkbox checkbox-primary">
                        <input id="{{checkbox.id}}" type="checkbox" ng-model="model[checkbox.model]">
                        <label for="{{checkbox.for}}"><b>{{checkbox.label}}</b></label>
                    </div>
                </td>
            </tr>
        </tbody>

So the question is how do i do this? so i flatten the array after i create it or do i change the way I create the checkboxes array in the service?

different plunker with html included new plunker with html

        <div class="hpanel" ng-repeat="section in formB6VM.sections">
                <div class="panel-body">
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="list-inline">
                                <li><h5><b>SecID</b></h5><span>{{section.section_name}}</span></li>
                                <li><h5><b>Section Name</b></h5><span>{{section.section_id}}</span></li>
                                <li><h5><b>Active</b></h5><span>{{section.date_active}}</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="row">
                        <div ng-include="'modules/survey-input/fb6/views/includes/fb6_input_table.html'"></div>
                    </div>
                    <div class="row">
                        <div ng-include="'modules/survey-input/fb6/views/includes/fb6_builder_developer_table.html'"></div>
                        <div ng-include="'modules/survey-input/fb6/views/includes/fb6_future_table.html'"></div>
                    </div>
                </div>
            </div>

object.checkboxes = object.sectionFutureCheckboxes[0].checkboxes; delete object.sectionFutureCheckboxes[0].checkboxes; , but Im not sure why you would need this. You can just access them via object.sectionFutureCheckboxes.checkboxes where they are now — Wesley Smith
– Wesley Smith, Commented Jan 10, 2016 at 21:07
In addition to @DelightedD0D 's answer, you should remove the previous checkboxes array with delete object.sectionFutureCheckboxes.checkboxes; — ssc-hrep3
– ssc-hrep3, Commented Jan 10, 2016 at 21:09
@DelightedD0D but it is an array so need object.sectionFutureCheckboxes[0].checkboxes — charlietfl
– charlietfl, Commented Jan 10, 2016 at 21:10
@texas697 what is higher level problem you are trying to solve? — charlietfl
– charlietfl, Commented Jan 10, 2016 at 21:12

Wesley Smith · Accepted Answer · 2016-01-11 00:01:28Z

6

To answer your original question of how to move a nested property of an object to the "root" of the object. The below would have the effect you were looking for:

object.checkboxes = object.sectionFutureCheckboxes[0].checkboxes; 
delete object.sectionFutureCheckboxes[0].checkboxes;

However, as charlietfl alludes to, there isnt much point to this from an objective point of view, 6 in one hand half a dozen in the other so to speak

After you clarified the issue, what you really need to do is correct the way your HTMl attempts to access the nested object. Specifically, in future_table.html you have:

<div class="col-sm-12 col-md-12 col-lg-6">
    <div class="table-responsive">
        <table class="table table-condensed">
            <tbody>
                <tr>
                    <td style="border-top:none" nowrap align="center" ng-repeat="checkbox in section.sectionFutureCheckboxes">
                        <div class="checkbox checkbox-primary">
                            <input id="{{checkbox.id}}" type="checkbox" ng-model="model[checkbox.model]">
                            <label for="{{checkbox.for}}"><b>{{checkbox.label}}</b></label>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <h5 class="future-table-h5"><b><i>*** Future Status - **Concept lots are not calculated in total</i></b></h5>
    </div>
</div>

However, section.sectionFutureCheckboxes is an array so you will need to iterate that first by changing <tr> to <tr ng-repeat="checkboxGroup in section.sectionFutureCheckboxes"> then update <td ... ng-repeat="checkbox in section.sectionFutureCheckboxes"> to <td ... ng-repeat="checkbox in checkboxGroup.checkboxes">

Like this:

<div class="col-sm-12 col-md-12 col-lg-6">
    <div class="table-responsive">
        <table class="table table-condensed">
            <tbody>
                <tr ng-repeat="checkboxGroup in section.sectionFutureCheckboxes">
                    <td style="border-top:none" nowrap align="center" ng-repeat="checkbox in checkboxGroup.checkboxes">
                        <div class="checkbox checkbox-primary">
                            <input id="{{checkbox.id}}" type="checkbox" ng-model="model[checkbox.model]">
                            <label for="{{checkbox.for}}"><b>{{checkbox.label}}</b></label>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <h5 class="future-table-h5"><b><i>*** Future Status - **Concept lots are not calculated in total</i></b></h5>
    </div>
</div>

Here is an Updated Plunker

Now, if you intended for there to only be one row of checkboxes, you'll need to track that back to through the way you create the array and figure out where it getting built incorrectly, but only you will know that.

edited Jan 11, 2016 at 0:01

answered Jan 10, 2016 at 21:10

Wesley Smith

19.6k22 gold badges93 silver badges135 bronze badges

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

6 Comments

texas697 Over a year ago

can u put in plunker please

Wesley Smith Over a year ago

@texas697 I can, but first you'll need to explain what you are actually trying to accomplish. THere is definitely a better way to do it but its hard to give advice when we dont know what your code is supposed to do

texas697 Over a year ago

ok, i updated plunker. right now i can access everything but the checkboxes.

Wesley Smith Over a year ago

I see the additions in your plunker but there is still no context. What are you trying to achieve? Right now your are just outputting the built JSON into a pre tag. The data is there, so the problem is not apparent. I assume you are attempting to build some sort of UI with this data, thats the part we need to know about. What about that doesnt work?

texas697 Over a year ago

ok, completely changed the post. let me know if needs more info

|

Collectives™ on Stack Overflow

how to flatten nested nested array of objects

1 Answer 1

Here is an Updated Plunker

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Here is an Updated Plunker

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related