Basic read of json fails

问题: It's very simple. I have 2 selects. When the user selects the category, it will appear another select with a subcategory. The problem is that subcategory select is always...

问题:

It's very simple. I have 2 selects. When the user selects the category, it will appear another select with a subcategory.

The problem is that subcategory select is always empty.

Category JSON (vm.categories):

[  
   {  
      "doctype":"1120",
      "description":"bla bla",
      "subcategories":[  
         {  
            "@id":1,
            "subcategory":"1",
            "description":"New Offer",
            "templates":[  
               {  
                  "template":"12",
                  "description":"asfafasga",
                  "deliveryChannels":[  

                  ]
               }
            ]
         },
         {  
            "@id":2,
            "subcategory":"2",
            "description":"New Offer",
            "templates":[  
               {  
                  "template":"1121",
                  "description":"asfag",
                  "deliveryChannels":[  
                     {  
                        "deliveryType":"4",
                        "description":"Test"
                     }
                  ]
               }
            ]
         }
      ]
   }
]

HTML

<div class="row">
    <div class="col-sm-12">
        <!-- Categories -->
        <label for="category-select"><b>Category&nbsp;</b></label>
        <select name="category-select" ng-model="vm.selectedCategory" required>
            <option value="" disabled>--- Please select a category ---</option> <!-- not selected / blank option -->
            <option value="{{category}}"
                    ng-repeat="category in vm.categories">
             {{category.description}}
            </option>
        </select>
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <!-- Sub Categories -->
        <label ng-show="vm.selectedCategory" for="subcategory-select"><b>Sub-Category&nbsp;</b></label>
        <select name="subcategory-select"
                ng-show="vm.selectedCategory"
                ng-model="vm.selectedSubCategory">
            <option value="" disabled>--- Please select a sub-category ---</option> <!-- not selected / blank option -->
            <option value="{{subCategory}}" 
                    ng-repeat="subCategory in vm.selectedCategory.subcategories">
                {{subCategory.description}}
            </option>
        </select>
    </div>
</div>

Any idea why this is happening? Somehow I can't read the subcategories array from the selected category

EDIT: If I put <span>{{vm.selectedCategory}}</span> in my html, it shows the json above. but if I put <span>{{vm.selectedCategory.subcategories}}</span> it's null

Another edit: Even <span>{{vm.selectedCategory.doctype}}</span> is null


回答1:

It is because your selected value is not evaluated as object but as string. To handle this issue you can:

You can either convert selected string to object with ng-change directive on first select and the following function

$scope.convert = function(){
    $scope.vm.selectedCategory = angular.fromJson($scope.vm.selectedCategory)
}

or use ng-options

<select name="mySelect" id="mySelect" ng-options="category.description for category in data" ng-model="vm.selectedCategory">
</select>

Demo


回答2:

To make a working demo, had to simplify vm.[namedVariables] into simple variables: kindly check below

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.selectedCategory = '';

  $scope.categories = [{
    "doctype": "1120",
    "description": "bla bla",
    "subcategories": [{
        "@id": 1,
        "subcategory": "1",
        "description": "New Offer",
        "templates": [{
          "template": "12",
          "description": "asfafasga",
          "deliveryChannels": [

          ]
        }]
      },
      {
        "@id": 2,
        "subcategory": "2",
        "description": "New Offer2",
        "templates": [{
          "template": "1121",
          "description": "asfag",
          "deliveryChannels": [{
            "deliveryType": "4",
            "description": "Test"
          }]
        }]
      }
    ]
  }];

  /*
  for(var i=0; i<$scope.profiles.length; i++){
    console.log($scope.profiles[0].TravelerExtended);
    console.log($scope.profiles[0].TravelerExtended.ExtendedInt_1);
  }
  */

});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">

  <div ng-repeat='item in categories'>
    {{item.description}}
    <div ng-repeat='subC in item.subcategories'>
      {{subC.subcategory}} - {{subC.description}}
    </div>
  </div>

  <hr/>

  <div class="row">
    <div class="col-sm-12">
      <!-- Categories -->
      <label for="category-select"><b>Category&nbsp;</b></label>
      <select name="category-select" ng-model="selectedCategory" required>
        <option value="" disabled>--- Please select a category ---</option>
        <!-- not selected / blank option -->
        <option value="{{category.doctype}}" ng-repeat="category in categories">{{category.description}}</option>
      </select>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-12">
      <!-- Sub Categories -->
      <label ng-show="selectedCategory" for="subcategory-select"><b>Sub-Category&nbsp;</b></label>
     
     <ng-container ng-repeat="item in categories">
     <!--
     <p>(1) {{selectedCategory}} </p>
     <p>(2) {{item.doctype}} </p>
     -->
     <select name="subcategory-select" ng-show="selectedCategory == item.doctype" ng-model="vm.selectedSubCategory">
        <option value="" disabled>--- Please select a sub-category ---</option>
        <!-- not selected / blank option -->
        <option value="{{subCategory}}" ng-repeat="subCategory in item.subcategories">
          {{subCategory.description}}</option>
      </select>
      
      </ng-container>
    </div>
  </div>


</div>


回答3:

Instead of using the value attribute with interpolation, use the ng-value directive:

<div class="row">
    <div class="col-sm-12">
        <!-- Categories -->
        <label for="category-select"><b>Category&nbsp;</b></label>
        <select name="category-select" ng-model="vm.selectedCategory" required>
            <option value="" disabled>--- Please select a category ---</option> <!-- not selected / blank option -->
            ̶<̶o̶p̶t̶i̶o̶n̶ ̶v̶a̶l̶u̶e̶=̶"̶{̶{̶c̶a̶t̶e̶g̶o̶r̶y̶}̶}̶"̶
            <option ng-value="category"
                    ng-repeat="category in vm.categories">
             {{category.description}}
            </option>
        </select>
    </div>
</div>

The double curly bracket interpolation directive attempts to convert the category value to a string. This does not work well when the category value is an object.

For more information, see AngularJS ng-value Directive API Reference.


It says [Object Object] when I do <span>{{vm.selectedCategory}}</span> and i can't read the subcategories

Pipe the vm.selectedCategory into the json filter:

<span>{{ vm.selectedCategory | json }}</span>

This allows you to convert a JavaScript object into JSON string.

This filter is mostly useful for debugging. When using the double curly notation the binding is automatically converted to JSON.

For more information, see AngularJS json Filter API Reference.

  • 发表于 2019-02-22 14:28
  • 阅读 ( 352 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除