Looking to showcase more detailed items within ng-repeat in AngularJS

Retrieve an object from the server that resembles the following structure:

"courses": [
      {
        "id": 1,
        "name": "piano",


        "classes": [
          {
            "id": 1,
            "name": "piano1",

          },
          {
            "id": 2,
            "name": "piano2",

          }
        ],
        "classes_count": 2,
        "feedbacks_count": 4
      },
]

JavaScript: Fetching data into Scope

httpService.getService(url, data).then(function(res) {
    $scope.datas = res.body.courses;
    console.log($scope.datas);
})

I want to display classes id using ng-repeat. How can I achieve this?

<ul  class="dropdown-list" style="display: none;">
    <li ng-repeat="course in datas | filter:{'id': showprofile}:true ">{{course.classes.id}}</li>
</ul>

The above code only works when I print {{course.classes}}, which gives me an array of 2 objects. How can I access course.classes.id inside the "li" element?

Answer №1

Within your data structure, there is an array nested within another array, resulting in two ng-repeats: the first loop iterates over courses, while the second one iterates over classes.

<ul ng-repeat="course in datas" class="dropdown-list" style="display: none;">
     <li ng-repeat="class in course.classes">{{class.id}}</li>
</ul>

Answer №2

In order to properly display nested elements, you will need to implement an additional loop.

<ul  class="nested-list" style="display: none;">
   <li ng-repeat="item in dataItems" ng-if='$first'> {{item.id}}</li>//
      <ul ng-if="item.children.length">
         <li ng-repeat="child in item.children">     {{child.id}}</li>
      </ul>
 </ul>

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 best way to modify a particular value buried within a JavaScript object?

Within my node project, I am working with a JavaScript object like the one shown below: that.responseData = { fields: { id: { label: 'ID', value: objectRecord.id, info: '', ex ...

Setting a class for a specific date on a jQuery UI calendar using the MultipleDates plugin

I recently encountered an issue with the Multiple Dates picker for jQuery UI date picker. It seems that the developer who created it has not updated it in quite some time, resulting in pre-highlighting dates no longer functioning properly. To address this ...

Boost the frequency of updates in Meteor.observe

When Python writes to a database (mongo) every second in the setup, Meteor.js is expected to react immediately to the new record insertion. Issue: However, the use of cursor.observe() results in the console outputting only 4-5 seconds after the new record ...

Having difficulty coming back from a promise catch block

I'm struggling to populate a menu list from my PouchDB database because I am unable to retrieve anything within the promise that is executed after calling get on the db. Below is the code in question: <MenuList> {this.populateSavedClues()} ...

What is the process for changing to a different page in NativeScript?

Having trouble creating a simple button in NativeScript labeled 'login'? I've created a login component, but when testing the code, it shows an error stating "no known component for element Login." <template> <Page> <TabV ...

Tips for integrating jquery functions with angularJS?

I'm having issues with my accordion menu implemented using jQuery in my AngularJS application. Currently, it's not functioning as expected. I have made some changes in the CSS by commenting out the display: none; for .menu-navigation ul ul to dem ...

Tips for Automatically Loading Dependencies in AngularJS

Currently, I am working on an Angular application where I am designing various widgets using HTML5. Here is a snippet of the code structure: <html ng-app> <div ng-controller="widget1"> </div> <div ng-controller="widget2"> ...

Tips for activating this effect even when the window is resized during page scrolling

There's a code snippet that enables the header to become unfixed when a specific div reaches the top of the screen and then scrolls with the rest of the content. While this solution works perfectly, I encountered a problem where the calculations for ...

The resolvers contain the Query.Mutation but it is not specified in the schema

const { ApolloServer, gql } = require('apollo-server-express'); const express = require('express'); const port = process.env.PORT || 4000; const notes = [ { id: '1', content: 'This is a note', author: 'Adam ...

Unable to extract attributes from a different model within Sails.js

I'm working on populating a customer model with attributes from the address.js model. However, when trying to post JSON using Postman, I keep getting a 500 Validation Error and struggling to pinpoint the cause of the issue. Any assistance would be gre ...

What steps can I take to prevent Internet Explorer from caching my webpage?

After implementing Spring MVC for Angular JS on the front end, I encountered an issue where logging in with different user credentials resulted in incorrect details being displayed. This problem only occurred in Internet Explorer, requiring me to manually ...

What is the syntax for creating a for loop in JSX within a React component?

I am working on a simple program that involves using a for loop to print numbers from 0 to 10. My goal is to utilize a for loop to print these numbers and pass the props to a child component. Please see my code below: import React, { Component } from &apo ...

Encountering a series of errors in Discord.js v14 while executing a specific

UPDATE :- After troubleshooting, I discovered that the previous error stemmed from my command handler itself! However, now I am encountering a whole bunch of new errors... actually, multiple errors. So, I'm in desperate need of assistance. (Note: Apol ...

Incorporating Scatter Dots into a Horizontal Stacked Bar Chart using Chart.js

My horizontal stacked bar chart is not displaying pink scatter dots based on the right y axis numbers. I need help figuring out what I am doing wrong. When I change the chart to a normal bar instead of horizontal, the dots appear. However, I require them ...

Utilizing AngularJS Service as a Singleton for Efficient File Storage

I am currently working on writing an AngularJS service that will function as a singleton in storing files. This service needs to have two methods: One for writing files by key called getFilesForTabId And another for retrieving saved files named setFilesF ...

What benefits come from employing jQuery for data storage techniques?

After learning more about jQuery data storage, I have a question. Is there any advantage to using either of these methods: $('#editCity').data('href', "xx"); var a = $('#editCity').data('href'); or $('#edit ...

Customizing alert message styles in Java script: Changing color and font of specific parts

I have been attempting to change a specific part of text to be bold and displayed in red color. Unfortunately, this does not seem to work on Microsoft Edge. Here is my code: alert("Hi how are you my friend"); The section that needs to be formatted: "fri ...

jQuery script unable to alter img src in Firefox and IE browsers

I am working with an image and a jQuery script to change the captcha image. <img src="captcha.jpg" id="my-image"/> The jQuery script is as follows: <script> $(document).ready($("#my-image").click(function(){ $('#my-image&ap ...

AngularJS: Share event from the parent component exclusively with its child components

I am looking to establish a way to broadcast an event from a parent directive to a specific child, without all children in every instance of the "parent" directive receiving it when using scope.broadcast in the parent directive link function. Current Beha ...

Having trouble converting response.data to a string in ReactJS

import React, { Component } from 'react' import TaskOneServices from '../services/TaskOneServices' import circle from '../assets/icons/dry-clean.png' import tick from '../assets/icons/check-mark.png' async function ...