将数据从JSON文件绑定到Angular 2 View

Question

I have some JSON data in the below format

{
  "AttributeSetID": "Smoker",
  "Description": "Smoker",
  "Groups": [
    {
      "AttributeGroupID": "Smoker Air Damper",
      "Description": "Smoker Air Damper",
      "Attributes": [
        {
          "AttributeID": "Air Damper/Vent Location",
          "Options": [],
          "Description": "Air Damper/Vent Location",
          "InputType": "Text Field",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        },
        {
          "AttributeID": "Air Damper/Vent Quantity",
          "Options": [
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "0",
              "Description": "0",
              "Position": 1.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "1",
              "Description": "1",
              "Position": 2.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "2",
              "Description": "2",
              "Position": 3.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "3",
              "Description": "3",
              "Position": 4.000000000,
              "Default": false
            },
            {
              "AttributeID": "Air Damper/Vent Quantity",
              "OptionID": "4",
              "Description": "4",
              "Position": 5.000000000,
              "Default": false
            }
          ],
          "Description": "Air Damper/Vent Quantity",
          "InputType": "Dropdown",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        }
      ]
    },
    {
      "AttributeGroupID": "Smoker Body",
      "Description": "Smoker Body",
      "Attributes": [
        {
          "AttributeID": "Body Color",
          "Options": [
            {
              "AttributeID": "Body Color",
              "OptionID": "Aluminum",
              "Description": "Aluminum",
              "Position": 1.000000000,
              "Default": false
            },    
            {
              "AttributeID": "Body Color",
              "OptionID": "White",
              "Description": "White",
              "Position": 23.000000000,
              "Default": false
            }
          ],
          "Description": "Body Color",
          "InputType": "Multiple Select",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        },
        {
          "AttributeID": "Body Finish",
          "Options": [
            {
              "AttributeID": "Body Finish",
              "OptionID": "Brushed",
              "Description": "Brushed",
              "Position": 1.000000000,
              "Default": false
            },          
            {
              "AttributeID": "Body Finish",
              "OptionID": "Stainless",
              "Description": "Stainless",
              "Position": 14.000000000,
              "Default": false
            }
          ],
          "Description": "Body Finish",
          "InputType": "Multiple Select",
          "Default": "",
          "Required": false,
          "EpicorOnly": false
        }       
      ]
    },    
    {
      "AttributeGroupID": "Smoker Wheel",
      "Description": "Smoker Wheel",
      "Attributes": [ null, null ]
    }
  ]
}

And here is my html

 Size: <input name="productSpecificationTemplate?.Groups[0].Attributes[1].Default" [(ngModel)]="productSpecificationTemplate?.Groups[0].Attributes[1].Default">
  Testing Required: <select name="productSpecificationTemplate?.Groups[0].Attributes[0].Default" [(ngModel)]="productSpecificationTemplate?.Groups[0].Attributes[0].Default">
                                <option *ngFor="let color of productSpecificationTemplate?.Groups[0].Attributes[0].Options" value={{color.OptionID}}>
                                    {{color.OptionID}}
                                </option>
                            </select>                               
 Sellable Country(ies):<select name="productSpecificationTemplate?.Groups[1].Attributes[0].Default" [(ngModel)]="productSpecificationTemplate?.Groups[1].Attributes[0].Default">
                                    <option *ngFor="let color of productSpecificationTemplate?.Groups[1].Attributes[0].Options" value={{color.OptionID}}>
                                        {{color.OptionID}}
                                    </option>
                                </select>

What I am doing here is going over the array and then listing the options in the dropdown by binding it. I am doing it based on the index value.

The issue is that I want to bind based on the AttributeGroupID for the group and AttributeID for the options. I am not sure how to filter and bind values based on the ID of the element instead of the Index.

Please let me know if I have not detailed the problem correctly.

Thanks

Answer 1

Would the following be something you are looking for, we nest iterations instead of writing it longhand with indexes. So your template would look like this. I have below left out those Options where array is empty:

<!-- Iterate Groups -->
<div *ngFor="let group of productSpecificationTemplate?.Groups">
  <!-- Iterate attributes in each group -->
  <div *ngFor="let attribute of group?.Attributes; let i=index">
    <!-- Do not show select if there is no options -->
    <div *ngIf="attribute?.Options?.length">
      <p>{{attribute.AttributeID}}</p>
      <select [(ngModel)]="attribute.Options[i].Default">
        <!-- Iterate options in each attribute -->
        <option *ngFor="let option of attribute.Options">{{option.OptionID}}
        </option>
      </select>
    </div>
  </div>
</div>

Here's a

Demo