Exploring a nested JSON structure using AngularJS's Ng-Repeat directive

I am facing an issue with displaying all elements of subcategory using Ng-Repeat. I have managed to show all events from the selected category with this code, but I am unsure how to display all activities from a specific event. I currently have this code....

HTML

<div class = "categorias_eventos">
           <ul>
              <li value = "0" class = "active">
                 <img src="images1"  ng-click="categorySelected = {categoryName: '1'}">
              </li>
              <li value = "1" class = "active">
                 <img src="images2" ng-click="categorySelected = {categoryName: '2'}">
              </li>
              <li value = "2">
                 <img src="images3" ng-click="categorySelected = {categoryName: '3'}">
              </li>
              <li value = "3" >
                 <img src="images4" ng-click="categorySelected = {categoryName: '4'}">
              </li>
              <li value = "4">
                 <img src="images5" ng-click="categorySelected = {categoryName: '5'}">
              </li>
           </ul>               
        </div>
<div ng-controller="Test">                     
   <div ng-repeat="evento in eventos | filter:categorySelected" ng-click = "eventSelected = {id: '{{evento.id}}'}">
      <div class="infoEvento">
         <div class="name_event">
            {{evento.eventName}}
         </div>            
      </div>                           
   </div>                     
</div>

<!-- Activities -->
<div ng-controller="Test">                     
   <div ng-repeat="activity in evento.activitys | filter:eventSelected">
      <div class="infoEvento">
         <div class="name_event">
            {{activitys.description}}
         </div>            
      </div>                           
   </div>                     
</div>

JAVASCRIPT

function Test($scope) {
  $scope.eventos = [

   {  
      "id":"1",
      "dateStart":"01-12-2014",
      "dateEnd":"12-12-2014",
      "eventName":"partyDeluxe",
      "categoryName":"Category 1",
      "activitys":
        [
           {
               "pic_id":"1500",
               "description":"Picture of a computer",
               "localion":"img.cloudimages.us/2012/06/02/computer.jpg",
               "type":"jpg"            
           },
           {
               "pic_id":"100",
               "description":"Picture of a computer",
               "localion":"img.cloudimages.us/2012/06/02/computer.jpg",
               "type":"jpg"            
           },
           {
               "pic_id":"15",
               "description":"Picture of a computer",
               "location":"img.cloudimages.us/2012/06/02/computer.jpg",
               "type":"jpg"            
           }
         ]  
   },

   ];;
   }

Answer №1

Your issue arises from having the inner ng-repeat placed outside of the outer one, causing a lack of context for the activity. One solution is to adjust your div structure so that one ng-repeat is embedded within the other. Here's an example:

<div ng-controller="Test">                     
   <div ng-repeat="evento in eventos | filter:categorySelected">
       <div ng-click = "eventSelected = {id: '{{evento.id}}'}">
           <div class="infoEvento">
               <div class="name_event">
                   {{evento.eventName}}
               </div> 
           </div>           
       </div>   

       <!-- Activities -->
       <div ng-controller="Test">                     
           <div ng-repeat="activity in evento.activities | filter:eventSelected">
               <div class="infoEvento">
                   <div class="name_event">
                       {{activity.description}}
                   </div>            
               </div>                            
           </div>                     
       </div>            
    </div>                     
</div>

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

AngularJS fetching data with two separate AJAX requests for both HTML and JSON responses

After activating network capture in my web browser to inspect the ajax calls coming out of AngularJS, I noticed that each call seems to result in two outcomes: URL|Protocol|Method|Result|Type|Received|Taken /p/jobs/03512dc8-6f25-49ea-bdff-0028ac2023cb|HTT ...

JavaScript ECMAScript 6 - WARNING: "Decorators can only be applied to a class when exporting"

In ECMAScript 6, I am attempting to export a function so that I can import it and utilize it in other files for the sake of writing DRY code. However, an error message is appearing: You can only use decorators on an export when exporting a class (16:0) ...

Guide to altering the characteristics of a button

Here is the code for a button within My Template: <div *ngFor="let detail of details" class = "col-sm-12"> <div class="pic col-sm-1"> <img height="60" width="60" [src]='detail.image'> </div> <div ...

Using references to pass variables in TypeScript [Angular 8]

I have several variables within the html of this component that are assigned their values by the typescript file. The declaration in the html is as follows: <h1>{{myproperty1}}<\h1> <h1>{{myproperty2}}<\h1> <h1>{{myp ...

Error: excessive recursion detected in <div ng-view="" class="ng-scope">

I've recently started learning angularJS and I've encountered an error that I need help with. Below is my index.html file: <body ng-app="myApp"> <div ng-view></div> <a href="table">click</a> <script ...

Querying the database to check for the presence of a file in a .js file on Google App Engine

I'm currently working on implementing an upload button for users to upload files to our storage system using Google App Engine with Python, as well as HTML and JavaScript for the views. To achieve this, we have an HTML file and a.js script that promp ...

CAUTION: Attempted to load angular multiple times while loading the page

I encountered a warning message while working on my project, causing errors in calling backend APIs due to duplicate calls. Despite attempting previously suggested solutions from the forum, I am stuck and seeking assistance. Can anyone provide guidance? Be ...

Passing an object from an Angular application to a backend server in Node.js using the

I have a YAML file with the following structure: Layouts: - Name: Default Layout LayoutId : 1 ConfiguredSegments: LiveA : Height : 100 Id : LiveA Ref1A : ...

What steps do I need to take in order to develop a cross-platform icon using React Native

Currently in the process of creating a signup form, I am looking to incorporate icons that will display differently based on the platform being used. For example, when utilizing Ionicons, I would like the icon to appear as ios-person on iOS devices and m ...

Combining JSON and XML Responses with Camel 2.14.1 Rest DSL

I have configured the new REST DSL in Apache Camel as follows: restConfiguration().component("jetty").host("0.0.0.0").port(24999).bindingMode(RestBindingMode.auto).dataFormatProperty("prettyPrint", "true"); rest("api/handshake") .post().i ...

Exploring nested optgroup functionality in React.js

Within my code, I am utilizing a nested optgroup: <select> <optgroup label="A"> <optgroup label="B"> <option>C</option> <option>D</option> <option>G</option> </optg ...

The 'checked' property cannot be bound to 'mat-button-toggle' as it is not recognized as a valid property in Angular 9

I am encountering an issue with my Angular 9 application. I have integrated angular-material and imported the MatCheckboxModule correctly in the module. Here is the version of the material package I am using: "@angular/material": "^10.2.0&q ...

How can we capture the current row's value for later retrieval?

Using datatables to display data from a mySQL database, I am looking to extract the current row's value and present it in a modal for editing. This is how the data is integrated into Datatable: $(document).ready(function() { $(' ...

Using JavaScript to assign one object to another object

I am facing an issue where I am trying to assign the local variable UgcItems to uploadedItems, but when I attempt to return the value, it shows as undefined. If I place the console.log inside the .getJSON function, then I get the expected value. However, t ...

How can I receive user input in JavaScript while incorporating three.js?

I am currently exploring the functionalities of this three.js example () and I am interested in enabling users to input specified X, Y, and Z positions for boxes dynamically. Initially, I considered utilizing a JavaScript prompt like below: var boxes = p ...

Using Express.js with Pug.js, dynamically render the page with new content following a fetch POST request

I have a collection of article previews sourced from a database and rendered on the webpage using a Pug.js mixin. each article in articles +articlePreview(article.title, article.text, article.imgSrc) To enhance the user experience, I want to implem ...

The issue with AngularJS validation not functioning properly when using ng-show and select2 together

Currently, I am utilizing select2 from bootstrap for a search dropdown menu. However, the issue at hand is that the validation does not seem to be functioning properly. Initially, everything was working fine without select2, but now the validation is not ...

Tips for utilizing date objects instead of date 'strings' while still obtaining the desired outcome

Below is a schema that I am working with: var MySchema = new Schema ({ event: { full: String, date: String, name: String, } }); To illustrate, here are some examples of the values: event.date = '16/02/20 ...

The Angular filter received an undefined value as the second parameter

Currently, I am facing an issue while trying to set up a search feature with a custom filter. It appears that the second parameter being sent to the filter is coming through as undefined. The objects being searched in this scenario are books, each with a g ...

Having trouble with AngularJS? Ng-switch not updating after ng-click?

Initially in my code, I check if a user has the ability to flag a discussion. If they do, I use ng-switch where upon flagging, a success message is displayed: <div ng-if="canFlag(discussion)"> <div ng-switch="isFlagging" ng-click="fla ...