Is the neglected property being discarded?

Question

Is the neglected property being discarded?

First things first, let's talk about my class:

class FavoriteFooBar {
 ...
 isPreferred: boolean = false;

 constructor() {
   this.isPreferred = false;
  }
}

Using a utility library called Uniquer, I arrange a list of FavoriteFooBar instances to prioritize favorites at the top:

this.favFBBars = Uniquer.orderBy(this.favFBBars, ['isPreferred', 'name'], ['desc', 'asc']);

After marking an item as favorite and checking my console log, it shows:

https://i.sstatic.net/4ogPm.jpg

Note that #3 does not have the isPreferred property...

It seems like Lodash doesn't sort properly when isPreferred isn't explicitly set. Is there a way to always display this property, even if it's unused/unset/false?

I've already tried:
- Initializing the property to false in the class
- Setting the property to false in the constructor of the class
- Iterating through this.favFBbars in the component and setting them all to false
- Implementing an interface for FavoriteFooBar

javascript json angular typescript lodash

Answer 1

Answer №1

It appears that this is the TypeScript approach to setting a default value for a class property.

export default class FooBar {
  constructor(private isFavorite: boolean = false) {
     ...
  }
}

Alternatively, you can achieve the same result with the following code:

export class FooBar {
  constructor() {
     this.isFavorite = false;
  }
}

If you want to sort a list based on a specific condition, you can use a function in the _.orderBy iteratee like this:

var foobars = [{isFavorite:false, name:"aaa"}, {isFavorite:true, name:"bbb"}, {isFavorite:false, name:"ccc"}, {name:"ddd"}]


foobars = _.orderBy(foobars, [function(foobar) {
    return foobar.isFavorite == true;
}, "name"], ["desc", "asc"]);

console.log(foobars)

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec2c1cacfddc6ee9a809f99809f9e">[email protected]</a>/lodash.min.js"></script>

Answer 2

It appears that this is the TypeScript approach to setting a default value for a class property.

export default class FooBar {
  constructor(private isFavorite: boolean = false) {
     ...
  }
}

Alternatively, you can achieve the same result with the following code:

export class FooBar {
  constructor() {
     this.isFavorite = false;
  }
}

If you want to sort a list based on a specific condition, you can use a function in the _.orderBy iteratee like this:

var foobars = [{isFavorite:false, name:"aaa"}, {isFavorite:true, name:"bbb"}, {isFavorite:false, name:"ccc"}, {name:"ddd"}]


foobars = _.orderBy(foobars, [function(foobar) {
    return foobar.isFavorite == true;
}, "name"], ["desc", "asc"]);

console.log(foobars)

<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec2c1cacfddc6ee9a809f99809f9e">[email protected]</a>/lodash.min.js"></script>

Is the neglected property being discarded?

Answer №1

Similar questions

Limit the Jquery selection specifically to elements on the modal page

Retrieving queries from a sibling component using react-query: A step-by-step guide

Customizing the Material UI v5 theme with Typescript is impossible

JavaScript random number functionality experiencing an unexpected problem

Exploring a JSON with multiple sectioned pages

Why is it necessary to include "ref" in the mongoose schema below? What potential consequences could arise if it is omitted?

Exploring the capabilities of utilizing filters within a ternary operator in AngularJS

Developing an Angular 11 Web API Controller with a POST Method

Axios displays a status code of 0 instead of the expected 403

Issue with Caching during Javascript Minification

Displaying JSON keys and values individually on an HTML page

The error message "In a Flutter application, trying to cast a 'List<dynamic>' to a 'List<int>' is not valid as they are not compatible subtypes."

Creating stylish rounded corner bars using angular-google-charts

I am noticing that my popover is causing my page to shift when I click it. It is expanding the width of my page more than I would

What is the method to incorporate a fresh generic parameter without officially announcing it?

Enroll in a stream of data while iterating through a loop in an Angular application

Tips for moving a texture horizontally across a sphere using threejs

Unable to retrieve the sum total of all product items and display it in the designated text element

Angular: undefined value detected during NgOnInit execution

The process of compressing font files (such as ArialMT.ttf) using JSZip is experiencing issues