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

executing jQuery toggle on freshly generated content

I have a webpage that I designed using jQuery. Within this page, there is a table with rows assigned specific color classnames (e.g., tr class="yellowclass"). Users can filter the rows by clicking checkboxes to show/hide tables of different colors. The i ...

Access a designated tab within a CSS-designed tab system

Can anyone offer some assistance? I currently have a tab structure created using CSS. The first tab is set as the default when the page loads. I am looking to create a link from another page that will take users directly to the page with the tabs and ope ...

Getting an unexpected empty response when submitting a request with a combination of image files and json parameters through postman, nodejs, and express

For my university project, I am developing a RESTful API for an online ticket shop that works across multiple platforms. I am using nodejs and express to create this API. First, I created the model for each event: const mongoose = require('mongoose&ap ...

Looking for a versatile jQuery plugin that enables right-click functionality across different browsers?

I am currently using a context menu plugin that displays a context menu when an element is right-clicked. However, this does not work on elements embedded with ajax. To solve this issue, I am considering utilizing ajax live to trigger the context menu func ...

Prevent selection of specific weekdays in Kendo grid calendar

When editing a record in a Kendo grid with a date field, is there a way to only allow the selection of Monday and disable all other days of the week? ...

Issues with Angular $http service retrieving data from a .JSON file

Below is the code snippet for my http service: app.controller('StoreController', ['$http', function($http){ var store = this; store.products = []; $http.get('/store-products.json').then(function(data){ sto ...

Determine the time difference between two dates, taking into account Daylight Saving Time adjustments

If a start date and number of days are given, I need to calculate the end date by adding the number of days to the start date. This is the code snippet I used: var endDate=new Date(startDate.getTime()+ONE_DAY); Everything was working fine until I notice ...

PHP - Implementing a Submit Button and Modal Pop-up AJAX across multiple browsers in PHP

As a newbie in PHP AJAX coding, I'm facing a challenge with having two browsers. My goal is to click the submit button on one browser and have a modal popup on the other browser simultaneously. Essentially creating a chat system where only a button an ...

Is it possible for a JWT generated using RS256 to be decoded on the jwt.io platform?

After setting up my first Express server and implementing user authentication with jwt, I'm now searching for a method to encrypt the jwt in order to prevent users from viewing the payload on the website. I am curious if anyone is aware of an encryp ...

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

I have been trying to troubleshoot this issue, but I am having trouble understanding how to resolve it. Currently, I am using lottie-web in a project and need to set the animation parameters on an object in order to pass them as a parameter later. This i ...

What is the best way to implement a scroll to top/bottom button globally in Vue?

I have created a scroll-to-top and scroll-to-bottom button for my application. However, I want to make these buttons accessible globally throughout the app without having to repeat the code in every page where the component is needed. Currently, I am inclu ...

Sending files asynchronously using Angular and ng-file-upload through a RESTful API

I have a form with multiple file upload fields. Here is the process: User fills out the form User selects the files to upload User clicks submit Now, here is what I would like to achieve: Submit the form to the server and receive an ID in return Uploa ...

Decoding JSON (using $Ref in Angular)

Having an issue parsing my JSON data. In object 2, I have a "t_quartier" where the value is just a reference pointing to object 1. How can I retrieve this value when on item 2? Thank you very much. ...

Problem encountered when attempting to utilize the spread operator within .vue files in an Elixir Phoenix 1.3 application

I'm facing an issue while building Vue.js components that involve using the spread operator to map states from Vuex within my Phoenix 1.3 application. The JavaScript compile errors I encountered are causing some roadblocks: 26 | }, 27 | compu ...

Extracting information from a website using Python and saving the results into a file

I have been working on a project where I need to retrieve data from a webpage (http://www.usgs.gov/) using Python and JSON. The script I found in a tutorial worked perfectly when executed, but I encountered errors when trying to save the output to a loca ...

Error occurred when attempting to load JSON data from file

Consider the json file test.json which contains the following data: {'review/appearance': 2.5, 'beer/style': 'Hefeweizen', 'review/palate': 1.5, 'review/taste': 1.5, 'beer/name': 'Sausa Weize ...

Include a new class in the classList of an element at a specific index

Is it possible to add a class to a specific position in order to maintain a certain order, especially when it goes against the logic that targets the class based on its position? link.closest('item').classList.add('c-class') // Contrad ...

Using jQuery to Iterate Through an AJAX Response

I'm working on a tagger application. When a user submits a tag, ajax sends the following response: {"returnmessage":"The Ajax operation was successful.","tagsinserted":"BLAH, BLOOOW","returncode":"0"} My goal is to extract the tags inserted and dyna ...

AFRAME - Enhanced scene overlay

I am currently exploring ways to implement an overlay menu on top of an A-FRAME scene. A great example of what I am aiming for can be found on this website -> By clicking on one of the tiles in the home menu, you will see that the previous scene is mo ...

Generate a JSON file by extracting data from an SQL table, enabling the capability to run queries on the created

I'm currently working on achieving the following task using Netbeans 11.3: 1.) Extract Data (String) From a Specific Column in an SQL Table. 2.) Convert and store the Data as a JSONArray using Filewriter. 3.) Retrieve the newly created JSON file (o ...