Using Angular to track objects by their unique ID

Upon receiving data from a REST api, I am faced with the following JSON content. 

 [
  {
    "names": {
      "en": "test123"
    },
    "children": [],
    "id": "68d87e8c-42f5-4f11-b25a-b30624246c3b",
    "version": 1,
    "code": "0",
    "order": 0,
    "country": "HR",
    "name": "test123",
    "parent": null,
    "selected": false,
    "hasQuestions": false,
    "level": 1,
    "state": "original",
    "hasChildChapters": false
  },
  {
    "names": {
      "en": "test456"
    },
    "children": [],
    "id": "d175e6d1-874e-4909-afb2-790c0a940c3f",
    "version": 1,
    "code": "0",
    "order": 0,
    "country": "HR",
    "name": "test456",
    "parent": null,
    "selected": false,
    "hasQuestions": false,
    "level": 1,
    "state": "original",
    "hasChildChapters": false
  }
]

I am attempting to showcase this content using ng-repeat directive with 'track by object.id'. The implementation is as follows:

<tr ng-repeat="chapter in chapters | filter: search track by chapter.id">

The issue arises when the ngRepeat:Dupes error continues to surface. Upon inspecting the JSON data, it has been confirmed that there are no duplicate IDs present. Could you shed some light on why the ngRepeat:Dupes error persists?

javascriptjsonangularjs

Answer №1

After analyzing the provided data, it was found that no duplicate error occurs. Here is the corresponding code snippet:

<div ng-controller="MainCtrl">
    <input type="text" ng-model="search">
    <div ng-repeat="chapter in chapters | filter: search track by chapter.id">{{chapter.id}}</div>
</div>

controller

$scope.chapters = [{
        "names": {
            "en": "test123"
        },
            "children": [],
            "id": "68d87e8c-42f5-4f11-b25a-b30624246c3b",
            "version": 1,
            "code": "0",
            "order": 0,
            "country": "HR",
            "name": "test123",
            "parent": null,
            "selected": false,
            "hasQuestions": false,
            "level": 1,
            "state": "original",
            "hasChildChapters": false
    }, {
        "names": {
            "en": "test456"
        },
            "children": [],
            "id": "d175e6d1-874e-4909-afb2-790c0a940c3f",
            "version": 1,
            "code": "0",
            "order": 0,
            "country": "HR",
            "name": "test456",
            "parent": null,
            "selected": false,
            "hasQuestions": false,
            "level": 1,
            "state": "original",
            "hasChildChapters": false
    }]

http://jsfiddle.net/75sdsuz2/2/

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

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

In my setup, I am working with static html and javascript along with C# Web API. One of the scenarios I encountered involves a link that triggers an oauth2 server from my HTML file named index.html. The question arises: Is it appropriate to establish the c ...

c#javascriptjqueryhtmloauth-2.0

Using Sequelize to Include Model Without Specifying Table Name

I am new to Sequelize I am facing an issue with "Nested Eager Loading" I have 2 tables with a one-to-many relationship Comment Table User Table This is the code I am using for the query Comment.findAll({ include: [User] }) The result I got was ...

javascriptnode.jsexpresssequelize.jssequelize-cli

Seeking assistance for my dissertation assignment: electron, express, and SQLite3

I am currently dedicated to my thesis project, which involves designing an educational desktop video game for both public and private schools within my city. Being a fan of electron, I thought it would be a great idea to develop my app using this platform ...

javascriptnode.jssqliteexpresselectron

default folder location for core modules adjustment

While experimenting with module imports in TypeScript, I encountered an issue when trying to import a module using import { Component, OnInit } from '@angular/core';. The compiler was successfully finding the module in the node_modules folder. I ...

angularjstypescripttsconfig

Retrieve information from a changing HTML table

I am working on a nodejs express project that features a Dynamic Table within my application. Users can add or remove rows and enter values into cells, but I am struggling to extract these values from the table without using jquery. My goal is to then inse ...

javascriptnode.jsexpress

Webpack 5 is unable to load animated gif files

Hello, I am currently diving into webpack and following the official documentation at https://webpack.js.org/guides/asset-management/#setup. My goal is to incorporate an animated gif using webpack 5. Although the placeholder for the gif is loading, I enco ...

javascripthtmldomgifwebpack-5

Change the background color of a table cell based on its value with the help of JavaScript

I am attempting to apply color to cells in an HTML table (generated automatically by Python and Django) based on the content of the cells. Below is my table. I want to specifically color the column "status". Whenever the word "Cloture" appears, I would li ...

javascripthtmlhtml-tabledjango-formsdjango-templates

Building a straightforward expandable/collapsible tree view with AngularJS by utilizing a particular data format

Seeking a tree view control that displays as follows: http://plnkr.co/edit/JAIyolmqPqO9KsynSiZp?p=preview +Parent child +Parent child child child child +Parent child child child child child chil ...

javascriptc#angularjstwitter-bootstraptreeview

What is the process for obtaining a push key in Firebase?

When a user submits data to the Firebase database, I need to handle the Key generated by that action in my own function. The challenge arises when a user fills out a form and sends data to our real-time DB. This data may include optional images, and I wan ...

javascriptreactjsfirebasereact-nativefirebase-realtime-database

Combining multiple API requests using NodeJS

I'm currently experimenting with SteamAPI to enhance my understanding of NodeJS. My aim is to retrieve game information after making an initial request to obtain the player's profile and storing the game IDs in an array. However, I am facing a ch ...

javascriptnode.jsrequest

Top method for verifying email existence in ASP.NET database

In our current asp.net web application, we are facing some challenges with using the update panel on the user registration page to check for existing users. These issues include: 1- The update panel tends to slow down the process. 2- The focus is lost wh ...

javascriptasp.netajaxjquery

What sets Fetch apart from ajax and XMLHttpRequest that makes it impressively faster?

Over the past few days, I have been working on optimizing a client table for a project. The table contains over 10k clients, and as a result, it was taking a long time to load. The front-end team had implemented pagination, filters, and reordering, which ...

javascriptjqueryajaxperformancefetch-api

Working with json, lists, and dictionaries in Python

Apologies for the extensive content, but I wanted to provide all necessary details. I am in the process of extracting specific data points from a JSON file with the following structure: { "count": 394, "status": "ok", "data": [ { ...

pythonarraysjsonlistdictionary

Issue with req.user being Undefined in Node, Express, Passport, and Mongoose

I've encountered an issue where req.user is defined when logging in, but undefined on other paths. I'm starting to feel stuck and out of ideas at this point. Another thing is that deserialization is never being called. server.js: var LocalStra ...

javascriptnode.jsexpressmongoosepassport.js

Over 8 maps are decoded in the latest version of ELM 0.19

I am currently using a flags decoder with default values. flagsDecoder : Decode.Decoder Params flagsDecoder = Decode.map8 Params (Decode.field "field1" (Decode.string) |> (Decode.withDefault) "1") (Decode.field "field2" (Decode.stri ...

jsonelm

Looking to organize data based on duplicate values within an array using Javascript in the Vue framework

Can anyone provide assistance? Data = [{"name":A,"val":20}, {"name":B,"val":7}, {"name":C,"val":20}, {"name":D,"val":8}, {"name":E,"val":5}] SortedValue ...

javascriptvue.js

Is there a way to retrieve a child's parents within an array.filter() callback function even if they were initially filtered out?

Today I stumbled upon the array.filter() method and its accompanying callback function. I have a collection of objects structured like this: var treeAry = [ {"id" : "200", "parent": "#", "type" : "1"}, {"id" : "300", "parent": "#", "type" : " ...

javascriptjqueryarrays

What issues can be identified in this REST API implementation?

Encountering an issue with the following code: Cannot POST /img/upload/' Code: app.post('/img/upload/',[multer({ dest: __dirname+'/www/images/new/', rename: function (fieldname, filename, req, res) { ...

angularjsnode.jsimageexpressupload

I am experiencing an issue where my UI does not reflect changes in the data model in SAP

Hey there, I've been grappling with a particular issue that has me stumped for the past few days, and my colleagues haven't been able to crack it either. The problem lies in binding two boolean values in a JSON to two different visible properti ...

jsondata-bindingsapui5

Tips for resolving the issue of a Bootstrap dropdown menu overlapping content in its vicinity

I am trying to position a Bootstrap dropdown button on the right-hand side of the page. The dropdown should cover 100% of the page's width and overlay any content when activated. However, there is a large logo on the left-hand side that I want users t ...

javascriptjqueryhtmlcssbootstrap-4