Filtering data using Angular

Just starting out with angular and trying to figure out the best way to achieve this:

  • I have some data in a json file that includes items of two types: 'course' and 'tutorial'. Tutorials are related to courses through a specific field.

    data = [
  { title: foo1, type: course, id:1},
  { title: foo2, type: course, id:2},
  { title: foo3, type: course, id:3},
  { title: t1, type: tutorial, id:4, related_course:2},
  { title: t2, type: tutorial, id:5, related_course:2},
  { title: t3, type: tutorial, id:6, related_course:3},
  ...

In my controller, I've set up functions linked to $scope to filter by type.

Now, in my template:

<div ng-repeat="item in data | filter:isCourse">
... display course data
   <div ng-repeat="item in data | filter.isTutorial">
   ... display tutorial data

I want to ensure that the tutorials shown match the id of the currently displayed course. Any ideas on how to tackle this?

Appreciate any help! - V

javascriptangularjsjson

Answer №1

Ensure to provide specific details for filters, and ensure that your JSON format is correct. It seems like many values are missing double quotes.

HTML

<div ng-repeat="course in data | filter: {type: 'course'}">
... display course data
   <div ng-repeat="tut in data | filter: { related_course: course.id }">
   ... display tutorial data

Access the Fiddle Here(Appreciation to @AWolf)

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

Understanding how to parse a JSON object within a Struts Action class

Allow me to provide an overview of the current situation followed by detailing the issue at hand. Within my JSP page, I am initiating a call to a Struts 2 Action through the $getJSON method of jQuery in JavaScript. Below is the code snippet: var a = {"i ...

javajqueryajaxjson

Split a column containing JSON stored as a string into individual rows and columns

I am currently working with SQL Server and I have a column that contains JSON data stored as a string. My goal is to explode/normalize this JSON data into new rows and columns. The table's current layout can be seen in the image provided below. Each P ...

sqljsonsql-servert-sqlopen-json

What is the best way to dynamically adjust the size of a grid of divs to perfectly fit within the boundaries of a container div without surpassing them?

Currently, I am working on a project for "The Odin Project" that involves creating a web page similar to an etch-a-sketch. I have made some progress, but I am facing a challenge with dynamically resizing a grid of divs. The issue lies with the container d ...

javascriptjqueryhtmlcss

What is the process of reading an excel file in angularjs?

I attempted to read an Excel file by following a tutorial I found at . Unfortunately, I encountered an undefined situation in the highlighted line below while trying to do so in IE11. var reader = new FileReader(); reader.onload = function( ...

javascriptangularjsexcel

What is the best way to extract data from a Json file using fgets and file_get_contents in a PHP script?

I encountered an issue with parsing a JSON file in PHP, here's the sample data: { "users":[ {"username":"user123","password":"123321abc"}, {"username":"user124","password":"123321abc"}, {"username":"user125","password":"123321abc"} ] } Currently, I ...

phpjsondecodefgets

Error encountered when trying to load Ajax script

As a beginner in the learning process, my code may appear messy. I am currently wrapping up my second project, which is a photo viewer. On the main page, there is a navigation system that loads different sections of the website using ajax. Since this proje ...

javascriptjqueryhtmlajaxcallback

Integrating external components into an Angular attribute directive within an Angular library

Error: NullInjectorError: No provider for ColumnComponent! After creating an angular library, I implemented an attribute directive within the library to help bind data to properties of a 3rd party component used in the main application. src/app/client.co ...

angularjsangularjs-directiveangular-library

How can I use jQuery to hide the calendar popup on the Bootstrap date picker?

What is the best way to prevent the calendar popup from appearing when using a Bootstrap date picker with jQuery? $("#id").val('').attr('disabled',true).trigger("liszt:updated"); I have tried using .prop and it's not working for ...

javascriptjqueryjquery-uitwitter-bootstrap-3

Error encountered in Android due to json parsing issue: com.google.gson.JsonSyntaxException, caused by java.lang.Il

Help needed with parsing json data error Expected BEGIN_ARRAY but was BEGIN_OBJECT at line 1 column 2 I have been struggling to find a solution for this. Here is my json data : { "user": [ { "email": "<a href="/cdn-cgi/l/email-protectio ...

androidjsongson

ERROR: Unexpected issue occurred with v8::Object::SetInternalField() resulting in an internal field going out of bounds while utilizing node-cache in Node.js

I recently started working with API exports that contain a large amount of data, so I decided to utilize the node-cache in order to speed up the API response time, as it was taking more than 2 minutes to retrieve the data. Being new to this, I came across ...

javascriptnode.jsexpressnodesnode-modules

Change the value of a boolean cell within my database table

I have a task where I need to dynamically update the status of the show_msg parameter based on user actions. When the submit button is pressed, I want to set it as TRUE if the checkbox is checked, and FALSE if not. The main HTML code includes a popup wind ...

javascripthtmlruby-on-railsajax

finding the node version in a code repository

Is it possible to determine the targeted node version (4 or 6) of a Node.js application by examining its code? I'm currently reviewing this: https://github.com/jorditost/node-postgres-restapi ...

javascriptnode.jsexpress

Determining the readiness of a node.js express server for use

Is there a way to automatically start a browser on the same machine as soon as a Node Express server is up and running? I'm looking for a method to check if the server is ready without having to wait an excessive amount of time. It would be ideal to h ...

javascriptnode.jsexpress

Formik state is mysteriously reverting field values to their default state

I've encountered an issue with my form and song state while trying to add a new field called "appleMusicId". Unfortunately, every time I add this field, it seems to reset the values of timeDescription and sceneDescription. I've spent hours tryin ...

javascriptreactjsformik

Tips for adding and executing animations in JavaScript/jQuery on your webpage

Within the code snippet given below, I am creating and appending two canvas tags to the body. The purpose of this animation is to draw a check mark. Upon loading the page, both canvas tags are added to the page; however, only one check mark is actually dra ...

javascriptjqueryhtmlcanvascss-animations

Using JavaScript to identify the unlock screen on a website

I've been searching everywhere for a solution to my issue, but I haven't had any luck with Google or other websites. I'm currently working on creating a mobile website and I need assistance with redirecting users to the homepage in such a w ...

javascriptmobile

When retrieving the card in React, only the first element is affected by the .map function

There seems to be an issue with Arrays.map as it is only working for the first object in the array. Here is the main function: function App(){ return ( <div> <NavBar /> { data.map((prop) =&g ...

javascriptreactjsarrays

Tips for emphasizing a table row according to its value

I am currently developing a Google web application that involves CRUD data generated from Google Sheets. The search function is working perfectly, but I am trying to enhance it by highlighting specific rows based on the data value in Column 7. For example ...

javascripthtmlcssgoogle-apps-scriptweb-applications

Differences between throwing errors, returning error objects, and using callbacks in Javascript

Currently, I am developing an assembler and simulator for a simplistic assembly language that my computer science students use during their classes. The project is being written in JavaScript with the intention of creating a user-friendly interface in the ...

javascriptassemblyerror-handling

Angular's '@angular/core/core' module does not have the exported member 'ɵɵFactoryDeclaration'

My Angular application was successfully compiled after running npm install. However, upon executing npm start, I encountered the following error: ERROR in node_modules/ng-apexcharts/lib/chart/chart.component.d.ts:57:21 - error TS2694: Namespace '&quo ...

javascriptnode.jsangular