如何展平嵌套的嵌套对象数组

Question

我正在制作ui细分数据的输入应用程序。每个细分可以有 1 到 n 个部分。我的目标是使用所需的输入、文本框、收音机、复选框等动态填充 ui。我将来自多个来源的数据组合到一个数组中。因为这是动态的，所以我创建了将模型更改为唯一名称的服务。现在的屏幕截图

我需要帮助的问题是复选框。我无法从 html 访问它们。这是我如何访问嵌套数组的示例。这很好用。

 <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>

我需要对复选框做同样的事情。这不起作用。

 <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>

所以问题是我该怎么做？所以我在创建数组后将其展平，还是更改在服务中创建复选框数组的方式？

包含 html 的不同 plunker 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>

Answer 1

回答您最初的问题，即如何将对象的嵌套属性移动到对象的 "root"。以下会产生您正在寻找的效果：

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

然而，正如 charlietfl 所暗示的那样，从 objective 的角度来看，这并没有多大意义，可以这么说，一只手有 6 个，另一只手有 6 个

澄清问题后，您真正需要做的是更正 HTMl 尝试访问嵌套对象的方式。具体来说，在 future_table.html 你有：

<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>

但是，section.sectionFutureCheckboxes 是一个数组，因此您需要首先通过将 <tr> 更改为 <tr ng-repeat="checkboxGroup in section.sectionFutureCheckboxes"> 然后更新 <td ... ng-repeat="checkbox in section.sectionFutureCheckboxes"> 到 <td ... ng-repeat="checkbox in checkboxGroup.checkboxes">

像这样：

<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>

这是一个Updated Plunker

现在，如果您打算只有一排复选框，则需要通过创建数组的方式将其追溯到并找出错误构建的位置，但只有您自己知道那。

如何展平嵌套的嵌套对象数组

how to flatten nested nested array of objects

javascript

jquery

underscore.js

angularjs

lodash

这是一个Updated Plunker