Exploring methods for navigating and refining extensive data sets (utilizing JSON and AngularJS)

I am seeking guidance on the best approach for a project, aiming to get the right advice from the beginning to avoid any detours along the way.

The App I am developing (using Ionic / (AngularJS) and Parse) will serve as a search engine for Exercises. The current Exercise Dataset contains over 4000 entries and is expected to grow further. To enable users to find exercises efficiently, there will be two search methods:

  1. Text search for the exerciseTitle using Angular ng-filter. This feature is currently functioning effectively.

  2. Filter selection similar to Amazon's system, where users can choose specific categories to narrow down their search results. Filters are added dynamically, enhancing the search process based on user preferences. This method proves useful when exercises have various names, allowing for categorization through tags/filters rather than just relying on the exercise title.

Currently, the app successfully implements this functionality by utilizing filter arrays to refine data search results.

We are in the midst of refining our dataset to maximize its searchability and filter options. One suggestion is to include tags for each exercise. For instance, the exercise 'Squat' could have tags categorized as below.

Body Part "Legs","Lower Body","Quadriceps"

Exercise Type "Strength","Standing", "Weighted"

Equipment "Dumbell"

In JSON format, a typical exercise entry appears like this:

{[
    "exerciseTitle":"Walking Lunge with Resistance Band Above Head",
    "exId" : "23jhgb56ha",
    "originalId" : "12",
    "masterImage" : "31",
    "images" : ["31","32","33"],
    "description" : "Holding the resistance band above your head take a step forward from the standing position and drop the knee of the rear leg down to the floor",
    "primaryMuscleGroup" : "Quadriceps",
    "secondaryMuscleGroup" : "Glutes",
    "equipment" : "Resistance Band",
    "functionalMovement" : "Lunge",
    "relatedExercises" : ["23","25"],
]}

Question 1. When adding tags to the dataset, should they be divided into taxonomies and individual tags, or would it suffice to have an array of tags related to each exercise?

Question 2. How can filter only the tags within a specific taxonomy in AngularJS?

Question 3. Any insights on approaching this project to ensure flawless search functionality, enabling users to locate even the most intricate exercises effortlessly within the system?

Thank you!

javascriptjsonangularjsionic-framework

Answer №1

If you check out my blog post, you'll find a great example of how custom filters can be applied to multiple properties using a sample fiddle.

Take a look here:

Answer №2

Instead of looping through the inner array every time, I would suggest adding tags as separate fields in a JSON format to improve speed.

In addition, it might be beneficial to perform searches on the database rather than on the client side, especially if the dataset is large. This approach can help avoid performance issues and limit results to a manageable number for the user. Keep in mind that most people only look at the first few results when conducting a search.

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

Navigating between pages in a multi-page setup using vue.js: A comprehensive guide

I came across a helpful post at this link about implementing multiple pages in Vue.js CLI. After setting up multiple pages, I was excited to test it out. However, I encountered an issue when trying to access the different pages from the URL http://localho ...

javascriptvue.js

Creating a Button with Icon and Text in TypeScript: A step-by-step guide

I attempted to create a button with both text and an icon. Initially, I tried doing it in HTML. <button> <img src="img/favicon.png" alt="Image" width="30px" height="30px" > Button Text ...

javascripttypescriptbuttontexticons

Angular constantly looping due to $watchCollection being triggered repeatedly

I am interested in monitoring the changes of an object, referred to as x, specifically its properties which are checkboxes. When a user checks a box, it alters the checked property (prop1) to 1. Each property contains certain content, and when enabled, it ...

javascriptangularjswatch

Adjust form elements dynamically depending on the selected option in a dropdown menu using Ruby on Rails

I currently have the following database tables set up: Departments ID| Department_name | Manager_ID Employees ID| Name | Department_ID Salaries ID| Employee_ID | Salary_Amount The departments table holds information about different departments within t ...

javascriptruby-on-railsrubyruby-on-rails-3

Convert data into JSON format and exclude any unnecessary keys

I am encountering some challenges while trying to create a new array from existing Objects. If I execute the following code snippet: console.log(JSON.stringify(this.data)) The output is as follows: { "nodes":[ {"id":1,"node":"0","name":"pizz ...

javascriptarraysobject

Having trouble adjusting the width and height of images to a full 100% scale

I'm currently working on an Angular and Bootstrap application where I am trying to integrate a Bootstrap carousel. However, I've encountered some resizing issues with the width and height of the images/graphs. You can view a demo of the issue he ...

javascripthtmlcssangularjstwitter-bootstrap

Eliminate any repeated elements within the array obtained from the API

I'm currently developing a Blog app and I've been facing an issue with duplicate results. I am working on removing these duplicates from the array. However, each dictionary inside the array contains two key-value pairs - one is unique and the ot ...

javascriptreactjsarraysdictionaryduplicates

Learn the process of transferring data from a Node.js server to an AngularJS application

As a beginner in the mean stack, I am currently working on my first project. I have successfully stored request data from a specific browser using cookies. However, I am facing a challenge with sending the history data from the server specific to each requ ...

angularjsnode.jssessionstorage

Divide the string into segments and set up pagination

<div><p class="pagi">page 1 content</p><p class="pagi">page 2 content</p><p class="pagi">page 3 content</p></div> I am currently facing a challenge with the string provided above. I need to create pagination ...

javascriptjqueryhtml

Passing a class from a string value in Angular 2 using TypeScript

class SimpleComponent { } var myClass = 'SimpleComponent'; bootstrapComponents.push(myClass); // Ensure that 'SimpleComponent' class is passed and not just a string. Is there a way to transform a string value into a class object in ...

javascriptangulartypescript

An easy guide to comparing date and time using Moment.js

Hey there, I'm looking for some help in validating two instances of date time moments. I am using this helpful Package which allows us to select hour, minute, and second. I want to validate whether the selected date time is before or after, as shown i ...

javascriptreactjsmomentjs

The JSON Serialization in .Net 4.0 involves replacing double quotes with "

I'm currently encountering an issue with using System.Web.Script.Serialization.JavaScriptSerializer() to serialize a dictionary object into a JSON string. The problem arises when I attempt to send this JSON string to an API hosted in the cloud, as the ...

c#asp.net.netjsonserialization

What methods can I use to enhance the functionality of a constructor/prototype function?

In this scenario, I have a constructor set up as follows: function Individuals(lastName) { this.lastName = lastName; this.firstName = []; } Additionally, there is a prototype defined like so: Individuals.prototype.getFirstName = function() { getName(); ...

javascriptarraysconstructorprototype

Certain HTML files linked to a Dreamweaver template (.dwt) are having trouble recognizing jQuery/JavaScript

My current task involves updating the navigation of a website utilizing a Dreamweaver template (DWT) as the base file. Initially, the navigation was created using jQuery navigation UI, but it did not fulfill all our requirements. Subsequently, I substitute ...

javascriptjquerydreamweaver

Initiate and terminate server using supertest

I've developed a server class that looks like this: import express, { Request, Response } from 'express'; export default class Server { server: any; exp: any; constructor() { this.exp = express(); this.exp.get('/' ...

javascripttypescriptexpressjestjssupertest

Utilizing AJAX to add information to jQuery data tables without taking advantage of their pagination and advanced features

The jQuery datatables plugin is a useful tool for adding filters, pagination, and search functionality to web applications. I have personally integrated it with my Laravel project to organize and display data effectively. Recently, I decided to enhance th ...

javascriptphpjqueryajaxdatatables

Performance concerns with Three.js

Using react-three-fiber, I have set up a simple scene that seems to be causing my MacBook to heat up significantly. I'm not sure if this is normal or if there is an issue with the implementation: Check out the code here If anyone has any insights or ...

javascriptreactjsperformancethree.js

Determine the maximum array size in Javascript

Having trouble setting a limit in my custom lightbox for a gallery <script> var imagenumber = 0; function btnleft(){ load = imagenumber-=1; document.getElementById('lightboxcontent').innerHTML=imagelist[load]; ...

javascriptarrayslimit

Is there a way to retrieve a button element from a pug template?

Why can't I use a button in index.js from a pug template? Here is the code in my pug template: doctype html html head meta(charset='UTF-8') meta(http-equiv='X-UA-Compatible' content='IE=edge') meta(name=& ...

javascriptnode.jspug

The JSON exception thrown states: "id" key has no associated value

Currently, I am attempting to parse JSON using an EditText, matching it with an ID, and then loading the data it contains into a TextView. However, I am uncertain about the correct approach for this task. When I input '5' in the EditText, I encou ...

javaandroidjson