The initial attempt to read the JSON file was unsuccessful

Question

The initial attempt to read the JSON file was unsuccessful

Let's simplify it. I have two dropdown menus. Once a user selects a category from the first dropdown, another dropdown menu with subcategories should appear.

However, there seems to be an issue as the subcategory dropdown is always empty.

The JSON data for categories (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 code:

<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 thoughts on why this issue is occurring? It seems I can't access the subcategories array within the selected category.

EDIT: When I include

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

in the HTML, it displays the JSON data correctly. However, if I use

<span>{{vm.selectedCategory.subcategories}}</span>

, it's returning null.

Another edit: Even

<span>{{vm.selectedCategory.doctype}}</span>

is showing null.

javascript angularjs

Answer 1

Answer №1

One reason for the issue is that your selected value is being treated as a string rather than an object. To resolve this problem, you have a couple of options:

You can convert the selected string to an object using the ng-change directive on the initial selection and the provided function:

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

Alternatively, you can utilize ng-options like so:

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

Check out the demo here!

Answer 2

One reason for the issue is that your selected value is being treated as a string rather than an object. To resolve this problem, you have a couple of options:

You can convert the selected string to an object using the ng-change directive on the initial selection and the provided function:

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

Alternatively, you can utilize ng-options like so:

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

Check out the demo here!

Answer 3

Answer №2

For the purpose of creating a functional demonstration, I needed to simplify vm.[namedVariables] into basic variables. Please see the code snippet 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"
          }]
        }]
      }
    ]
  }];

});

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

Answer 4

For the purpose of creating a functional demonstration, I needed to simplify vm.[namedVariables] into basic variables. Please see the code snippet 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"
          }]
        }]
      }
    ]
  }];

});

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

Answer 5

Answer №3

Instead of utilizing the value attribute with interpolation, opt for 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 choose 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 use of double curly brackets for interpolation tries to convert the category value into a string which may not be appropriate for objects.

For detailed guidance, consult AngularJS ng-value Directive API Reference.

When I include
<span>{{vm.selectedCategory}}</span>
, it displays [Object Object] and doesn't show subcategories

Pipe vm.selectedCategory into the json filter like so:

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

This technique converts a JavaScript object into a JSON string for better readability.

The json filter is particularly beneficial for troubleshooting. The binding is automatically transformed into JSON when using the double curly notation.

For further insights, refer to AngularJS json Filter API Reference.

Answer 6

Instead of utilizing the value attribute with interpolation, opt for 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 choose 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 use of double curly brackets for interpolation tries to convert the category value into a string which may not be appropriate for objects.

For detailed guidance, consult AngularJS ng-value Directive API Reference.

When I include
<span>{{vm.selectedCategory}}</span>
, it displays [Object Object] and doesn't show subcategories

Pipe vm.selectedCategory into the json filter like so:

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

This technique converts a JavaScript object into a JSON string for better readability.

The json filter is particularly beneficial for troubleshooting. The binding is automatically transformed into JSON when using the double curly notation.

For further insights, refer to AngularJS json Filter API Reference.

The initial attempt to read the JSON file was unsuccessful

Answer №1

Answer №2

Answer №3

Similar questions

Display data in an HTML table based on user search input using Angular

What is the best way to determine the nearest vertex to a given 3D point?

Is there a way to send a single POST request to two different external URLs simultaneously?

Successful execution of asynchronous method in Node.js without any errors

Duplicating a div element using jQuery .load

Having trouble with the speed of multiple jQuery posts?

Can data from HTML forms be extracted into an Android app when utilizing webView?

Adding a property to every object within an array using Vue.js: A step-by-step guide

Trigger a jQuery event when a particular element has finished loading

Vue.js encounters a null value for "$slots.default()[0].el" when dynamically passing a slot using v-for

What makes a single numerical value in an array suitable for basic arithmetic operations?

The initial line of the HTML canvas features a varying width

Tips for automatically inserting a "read more" link once text exceeds a certain character count

"Bootstrap Toggle malfunctioning when switching between disabled and enabled states on a restricted set of

Error: Unable to Navigate to Present Location ("/search") as It is Duplicated

The $.each function seems to be stuck and not cycling through the

Add every WebSocket message to a div element in VUE3

Animating on page load with delay using Angular JS

Transform an image into Base64 format by effortlessly dragging and dropping

Break down the execution process of the intricate JavaScript return statement