How to utilize dot notation in HTML to iterate through nested JSON in AngularJS?

I'm struggling with displaying nested objects loaded from a JSON file in Angular. I've seen examples of using dot notations in HTML to access nested data, but I'm new to Angular and can't seem to get it right. The JSON is valid, but I just need some guidance on how to properly display the menu-card names in separate lists. Here's what I have so far (no errors in the console):

<div ng-controller="menu" ng-repeat="item in menu.voorgerecht">
        <div>{{item.naam}}</div>

</div>

js

angular.module("app", [])

.controller("menu", function ($scope, $http) {
            $scope.menu = null;
            $http({
                method: 'GET',
                url: 'menu-items.json'
            }).succes(function (data, status, headers, config) {
            $scope.menu = data;
        }).error(function (data, status, headers, config) {});
});

json

{
        "voorgerecht": [
            {
                "naam": "Sardine"
            },
            {
                "naam": "Funghi Trifolati"
            }
        ],
        "pizza": [
            {
                "naam": "San Marco"
            },
            {
                "naam": "Capriciosa"
            }
        ],
        "desert": [
            {
                "naam": "Sorbet"
            },
            {
                "naam": "Dame Blanche"
            }
        ]
}
javascriptjsonangularjsangularjs-ng-repeat

Answer №1

Avoid using ng-repeat on the same element where ng-controller is placed:

<div ng-controller="menu">
  <div ng-repeat="item in menu.voorgerecht">
    <div>{{item.naam}}</div>
  </div>
</div>

Answer №2

This will definitely do the trick

<div ng-controller="list">
   <div ng-repeat="item in list.starter">
      {{ item.name }}
   </div>
</div>

Check out the demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the most effective approach for managing exceptions at a global level in Node.js using Express 4?

Is there an Exception filter available in node.js with express 4, similar to the one in asp.net MVC? I have searched through various articles but haven't found a solution that meets my requirements. I also attempted the following in app.js: process ...

javascriptjqueryasp.net-mvcnode.jsexpress

Troubleshooting a scenario where making edits to a mongoDB item does not result in any updates

I am struggling with a problem in my nodeJS application involving updating items in a mongoDB database. I have successfully implemented features to add and remove notes, but when attempting to update a note, the changes do not reflect in the database. Desp ...

javascriptnode.jsmongodbexpressmongoose

Observing data within an AngularJS service

I am currently working with a service called sharedData and a controller named HostController. My goal is to have the HostController monitor the saveDataObj variable within the sharedData service, and then update the value of host.dataOut, which will be re ...

javascriptangularjs

Prevent the selection of a dropdown option in AngularJS once it has already

var demoApp = angular.module('myApp', []); demoApp.controller('QaController', function($scope, $http) { $scope.loopData = [{}, {}]; $scope.questions = { model: null, availableOptions: [ {id: '1& ...

javascriptangularjsselectdropdown

Using Angular to sort arrays based on the values in a separate array

I have a unique setup where there is a table containing select options in each row. The value of the select option changes based on the 'dataType' specified for that particular row. Here is an example of my Table Array: { 'name':' ...

javascriptangular

WCF service providing JSON-formatted response

I'm creating a WCF service and building an object named FinalList that consists of a Chart object and a list of Data objects. I want to return JSON data in a specific format to my ajax function: {"d":{"chart":{"caption":"Year","exportatclient":"1", ...

c#asp.netjsonwcf

Best practices for securing passwords using Chrome DevTools in React development

React developer tool inspector Is there a way to prevent password values from appearing in the inspector as a state when handling form submissions in ReactJS, especially when using Chrome's React developer tool? ...

javascriptreactjsgoogle-chrome

Conceal the loading spinner in JQuery once the image has finished loading

I am working with a jQuery function that captures the URL of an image link and displays the image. However, my issue lies in managing the loading process. I would like to display a LOADING message and hide it once the image has fully loaded, but I am strug ...

javascriptjquery

The local variable within the Angular constructor is not initialized until the ngOnInit() function is invoked

I am encountering difficulties with making backend calls from Angular. In my component, I am fetching the "category" parameter from the URL as shown below: export class ProductsComponent{ productList = [] category = "" $params; $products ...

javascriptangular

The timestamp will display a different date and time on the local system if it is generated using Go on AWS

My angular application is connected to a REST API built with golang. I have implemented a todo list feature where users can create todos for weekly or monthly tasks. When creating a todo, I use JavaScript to generate the first timestamp and submit it to th ...

javascriptangularrestdatetimego

Sophisticated approach to creating a dynamic form using ng-repeat

As a newcomer to AngularJS, I am facing the following issue: I need to loop through an array of 'attributes' containing keys that correspond to values stored in an Object. <div ng-repeat="key in attributes"> {{key}}: <input typ ...

angularjsformsiteratorkeyangularjs-ng-repeat

Is there a way to pass around jest mocks across numerous tests?

In my test scenarios, I've created a mock version of the aws-sdk, which is functioning perfectly: jest.mock("aws-sdk", () => { return { Credentials: jest.fn().mockImplementation(() => ({})), Config: jest.fn().mockImplementati ...

javascripttypescriptunit-testingjestjs

Having trouble getting jQuery .append() to behave the way you want?

I have created a code snippet to display a table like this: $("#results").append("<table><tr><th>Name</th><th>Phone Number</th></tr>"); $("#results").append("<tr><td>John</td><td>123123123 ...

javascriptjquerycss

Modify the variable for each VU in K6 (refresh token)

When I start my K6 test, I utilize my setup() function to obtain a token that will be used by every VU. I want each VU to have the same token, rather than generating individual tokens for each one. Although this works fine initially, the challenge arises ...

javascriptperformancetestinggrafanak6

Error in Laravel npm package

Working on my Laravel project, I encountered an issue while trying to implement a video chat feature using https://github.com/PHPJunior/laravel-video-chat?ref=madewithlaravel.com with laravel-echo-server. Despite trying various solutions, none seemed to wo ...

javascriptlaravelnpmlaravel-mix

The function of removing the ng-submitted class in AngularJS after form submission seems to be malfunctioning when using setPristine and setUnt

When a form is submitted in Angular, the class ng-submitted is automatically added by default. In my attempts to reset the form state by using $setPrestine and $setUntouched, I encountered some errors that prevented it from working properly. Examples of t ...

angularjs

Upon receiving AJAX-content, the next iteration of the $.each function will be triggered

This question has been asked on an online forum in the past, but it was around four years ago and there may be a more efficient solution available now. In my code, I have a loop that sometimes requires additional data to be fetched through ajax calls. Af ...

javascriptjqueryajaxasynchronousjquery-deferred

Using a variable name to retrieve the output in JavaScript

I created a unique JavaScript function. Here is the scenario: Please note that the code provided below is specific to my situation and is currently not functioning correctly. analyzeData('bill', 'userAge'); Function analyzeData(u, vari ...

javascript

The timing of setTimeout within the $.each function does not behave as expected

I am looking to back up a list, delete all items within it, and then append each item one by one with a delay of 1 second between them. This is the approach I have taken: var backup = $('#rGallery').html(); $('#rGallery li').remove(); ...

javascriptjquerysettimeouteachtiming

Switch to using addresses instead of latitude and longitude coordinates when utilizing the Google Maps API

I am looking to utilize Google Map Markers to indicate the locations where our services are offered. The code I have created using latitude and longitude is functioning properly, however, for my project I need to display city names instead of lat/long ...

javascripthtmlgoogle-mapsweb