Accessing properties of objects using specific keys

In my coffeescript code, I am attempting to retrieve the keys from an object where the key matches a specific value. However, in addition to the object's own properties, I am also getting function properties in my result.

This issue is causing an error related to the 'track by' expression which does not exist on these function properties.

[ngRepeat:dupes]Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater:

prod in products | track by prod.ProductTypeCode
, Duplicate key: undefined

Here is the 'track by' expression that is triggering the error:

<option ng-repeat="prod in products | track by prod.ProductTypeCode"
        value="{{prod.ProductTypeCode}}">{{prod.ProductType}}
</option>

Although I specified the 'own key' in the 'for of' loop, functions like 'isEmpty' and 'contains' are still appearing in my result array.

Here is the 'for of' loop I am using:

product for own key, product of $scope.products when key isnt 'RTMT'

Shown below is my $scope.Products containing the keys:

{
  CK: {
    ProductCategoryCode: 'DEP',
    ProductCategory: 'Deposit',
    ProductTypeCode: 'CK'
  },
  RTMT: {
    ProductCategoryCode: 'RTMT',
    ProductCategory: 'Retirement',
    ProductTypeCode: 'IRA'
  },
  SAV: {
    ProductCategoryCode: 'DEP',
    ProductCategory: 'Deposit',
    ProductTypeCode: 'SAV'
  },
  TD: {
    ProductCategoryCode: 'DEP',
    ProductCategory: 'Deposit',
    ProductTypeCode: 'TD'
  }
}

While I am able to extract only 'CK', 'SAV', and 'TD', I am observing unexpected functions as well:

https://i.sstatic.net/KAvw8.png

How can I filter out the function types and only retrieve the Object types in coffeescript?

Upon examining the compiled JavaScript code snippet, it appears to work correctly but the functions are still visible in Firefox's debug window.

// Generated
var hasProp = {}.hasOwnProperty,
  indexOf = [].indexOf || function(item) {
    for (var i = 0, l = this.length; i < l; i++) {
      if (i in this && this[i] === item) return i;
    }
    return -1;
  };

var obj = {
  CK: {
    ProductCategoryCode: 'DEP',
    ProductCategory: 'Deposit',
    ProductTypeCode: 'CK'
  },
  RTMT: {
    ProductCategoryCode: 'RTMT',
    ProductCategory: 'Retirement',
    ProductTypeCode: 'IRA'
  },
  SAV: {
    ProductCategoryCode: 'DEP',
    ProductCategory: 'Deposit',
    ProductTypeCode: 'SAV'
  },
  TD: {
    ProductCategoryCode: 'DEP',
    ProductCategory: 'Deposit',
    ProductTypeCode: 'TD'
  }
};

console.log(getValues(obj));


function getValues(obj) {
  // Generated
  var key, product, ref, results;
  ref = obj; // $scope.products;
  results = [];
  for (key in ref) {
    if (!hasProp.call(ref, key)) continue;
    product = ref[key];
    if (key !== 'RTMT') {
      results.push(product);
    }
  }
  return results;
}

Answer №1

To determine if a property is a function, you can use the typeof operator:

function filterFunctions(obj) {
  var prop, value, reference, output;
  reference = obj; // $scope.data;
  output = [];
  for (prop in reference) {
    if (!hasProperty.call(reference, prop)) continue;
    value = reference[prop];
    if (prop !== 'RTMT' && typeof reference[prop] !== 'function') {
      output.push(value);
    }
  }
  return output;
}

Answer №2

Using track by $index should resolve the issue and prevent the exception from occurring again.

<select ng-repeat="item in items | track by $index" value="{{item.id}}">{{item.name}}</select>

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

"Troubleshooting the issue of Angular UI-Select failing to display a large

Check out my comprehensive json file containing cities from around the world: download here. Furthermore, take a look at the snippet of html code below: <div class="form-group"> <label class="control-label"> CITY </label> ...

Reactjs rendering problem related to webpack

Greetings! I am new to using react js and decided to create a quiz application. However, I encountered an error when the render function was called. Below is my webpack.config file: module.exports = { entry: { app: './src/index.js' }, ...

Tips for utilizing the multiselect() function without deleting current values and incorporating new values determined by another selection

Currently, I am working on an e-learning project that involves managing a large number of student registrations. I have implemented a search box to find students' names and add them to a list. However, I encountered an issue when trying to search for ...

Creating an endless ticker animation in AngularJS that dynamically adjusts to element dimensions

This is my initial foray into AngularJS, where I am creating a ticker display comprised of boxes. Check out the CodePen here The Code: index.jade: doctype html html(ng-app="ticker") head script(src="../bower_components/angular/angular.js" ...

Is there a way to generate and transmit a text file using XmlHttpRequest or $.ajax?

The server is anticipating an html or txt file to be sent from a form named "websitetopdf". The file is dynamically created on client javascript and should only function properly on Chrome. Below is the form that needs to be used for sending: <form ac ...

The updated values in an Angular application may not always be accurately represented by interpolated values

The values of the elements in the dropzone1 array only show the initial top and left values, not the latest ones. Within the draw() function, I add the top and left values to the topLeft array and then push it to the dropzone1 array inside the move() func ...

Styling with CSS: A guide to reducing paragraph margins within a div element

My current project involves using javascript to dynamically insert paragraphs inside a div element. Essentially, the script grabs the value entered into an input form when a button is clicked and adds it as a new paragraph within a specific div. However, I ...

EmberJS: Learning how to create a record with a belongsTo relationship

My issue involves using Posts and Comments to explain my problem. In my post_controller, I am trying to create a new record for a comment related to the current post. What is the recommended way to achieve this in Ember? The relationship between Post and ...

Refreshing a page using AJAX form functionalities

After spending some time searching, I am unable to find a satisfactory solution to my issue. I have a "finance" tracker that includes hidden divs which are displayed using jQuery when the corresponding button is clicked. Additionally, I have an Asset Track ...

Exploring Angular 2 - examining how @input is implemented within the ngOnInit lifecycle hook for testing a component

Presently, I am facing a challenge while attempting to test a child component that is designed to receive input from the host component and utilizes the ngOnInit lifecycle hook as depicted in the following code snippet. @Component({ selector: 'my ...

What techniques can I employ to ensure that withLatestFrom() effectively interacts with itself?

In my program, I have an intermediate stream that is connected to a source, but it can also trigger events from other sources (such as user input). In another part of my code, there is a derived stream that needs to compare new data from the intermediate w ...

Use javascript/ajax to submit the form on a separate page

I'm trying to use ajax to submit a form on another page, but my code doesn't seem to be working. Here is what I have: Send(); function Send() { var abc = document.getElementsByClassName("main"); for (var i = 0; i < abc.length; i++) { var ...

Is it possible to dynamically change an ngModel value directly from the component?

I'm currently immersed in an Angular project and my initial file setup was like this: dog.ts: export interface Dog { name: string; age: number; breed: string; } dog.component.ts: import { Dog } from '../dog'; @Component({ //setup ...

Utilizing the power of combined variables in Javascript

Is there a method to incorporate variables in each loop of a javascript loop? For instance, if I were to insert this code into a loop if (e1) {item_text += '{id:"' + id[1] + '",lvl:' + e1lvl + '},<wbr>'} if (e2) {item_ ...

How can one properly extend the Object class in JavaScript?

I have a scenario where I want to enhance a record (plain Javascript object) of arrays with additional properties/methods, ideally by instantiating a new class: class Dataframe extends Object { _nrow: number; _ncol: number; _identity: number[]; co ...

Utilize context.isPointInPath(x, y) in HTML5 Canvas for intricate shapes that contain multiple paths

I am currently working on a project that involves drawing a complex shape composed of 6 thin lines and two thick lines. In my code, I have defined 8 paths to achieve this: context.save(); context.lineWidth=2; var TAB_ABSTAND=10; var T ...

Connecting a text input in a nested component to the data passed down from its parent component in VueJS

My VueJS setup involves a child component sending data to a parent component, which then tries to route the data to a sibling of the child to create new components. I'm using a dictionary to group the data and push it into an array. The array is then ...

Arrow functions in ECMAScript 6

var createTempItem = id => ({ id: id, name: "Temporary Product" }); I understand that the arrow function above is the same as: var createTempItem = function(id) { return { id: id, name: "Temporary Product" }; }; However, I am ...

Tips for sending an array of inputs to the query selector in Node.js using Cloudant

Currently, I am attempting to retrieve documents from a cloudant database using node.js. While I have successfully managed to obtain results for a single input value, I am encountering difficulty when it comes to querying with an array of inputs. For a si ...

Tips for Identifying Different ID Values of HTML Elements with jQuery

Currently, I have two different divs on my webpage, each containing buttons and hidden fields. When I try to pass the value of the hidden field attached to the button in a jQuery function, I encounter an issue where clicking on the second div results in pa ...