Testing AngularJS I found a situation that I would like to know why it happens.

Take a look at the object $scope.filmthat is defined in the controller below:

/* Modelo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  /* Film */ 
  $scope.film = {
    titulo: 'Mad Max Fury Road',
    año: 2015
  };
}]);

As is, it is an object with a property tituloand a property año. In the case of the property año, it is defined with the letter ñ .

$scope.film = {
    titulo: 'Mad Max Fury Road',
    año: 2015
};

If I want to use an expression in a view to print the value of the añoobject's property, using the syntax objeto.propiedad...

<!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film.año}}</p>
    </div>
</div>

...I get an error:

Lexer Error: Unexpected next character at columns 6-6 [ñ] in expression [film.año].

Giving me to understand, according to the AngularJS error reference documentation, that the ñ character generates a lexical error in the expression:

Occurs when an expression has a lexical error, for example a malformed number (0.5e-) or an invalid unicode escape.

If, on the other hand, I use the same expression to print the value of the property añousing the syntax objeto['propiedad'], it doesn't cause any problems, and the value of that property is shown to me in the view.

<!-- Vista -->
<div ng-app="myApp">
    <div ng-controller="mainCtrl">
        <p>{{film['año']}}</p> <!-- HTML: 2015 --> 
    </div>
</div>

test snippet

Here you can try it. I commented out the expression that does not give errors.

/* Modelo */
let app = angular.module('myApp', []);

/* Controlador */ 
app.controller('mainCtrl', ['$scope', function($scope){
  $scope.film = {
    title: 'Mad Max Fury Road',
    año: 2015
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>

<!-- Vista -->
<div ng-app="myApp">
  <div ng-controller="mainCtrl">
    <p>{{film.año}}</p>
    
    <!-- <p>{{film['año']}}</p> -->
  </div>
</div>

I could just as well use the syntax objeto['propiedad']to print my property value, or change the property name from añoto annio(or others).

But the point of my question is to know why AngularJS does not allow the use of the letter ñ as part of a property name, using the syntax objeto.propiedadinside an expression.

I am trying to make a filter but I have no idea how to do it, I can receive suggestions, the filter works as follows:
When you click on one of the tags at the top, you should be able to display the content that has the TAG selected in the upper part, if one of the tags does not have the selected item in the upper part, it must be hidden.

PS: I have 2 items, each item has tags and should be able to filter/display according to the tags at the top

$(document).ready(function(){
  $('.content__item__filter span').on('click', function() {
    $(this).toggleClass('active__tag');
    var value = $(this).text().toLowerCase();
    $(".content__item__tag .content__tags").filter(function() {
      $('.content__item__tag').toggle($(this).text().toLowerCase().indexOf(value) > -1);
    });
  });
});

.content__item__filter span.active__tag {
  background-color: #c6a067;
}
.content__body {
  padding: 20px;
}
.content__item__filter span {
  padding: 5px 10px;
  display: inline-block;
  margin: 5px;
  background-color: #697084;
  color: #fff;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="content__body">
  <div class="content__item__filter">
    <span>IoT</span>
    <span>Firmware</span>
    <span>RPI</span>
    <span>Blockchain</span>
    <span>GIMP</span>
  </div>

  <!-- Tag 1 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 1. Lorem ipsum</h3>
    <div class="">
      <div class="tag__date">06 - 2014</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p class="mt-0">
        Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
       
      </div>
      <div class="content__tags">
        <span>Tags: IoT, Lorem, ipsum, dolor, sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 1 -->

  <!-- Tag 2 -->
  <div class="content__item item content__item__tag">
    <h3 class="content__item__subtitle">Title 2. Consectetur adipiscing elit.</h3>
    <div class="">
      <div class="tag__date">09 - 2015</div>
      <div class="content__item__description__tag">
        <div class="content__item__image">
          <h4>imagen</h4>
          <!--<img src="">-->
        </div>
        <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
        </p>
      </div>
      <div class="content__tags">
        <span>Tags: Firmware, Lorem, ipsum, dolor, sit amet</span>
      </div>
    </div>
  </div>
  <!-- End Tag 2 -->
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	

I have an interesting problem, first of all the model itself:

class Reserva(models.Model):
    cliente = models.CharField(max_length = 200)
    empleado_de_turno = models.ForeignKey(User, on_delete = models.CASCADE)

The problem consists:

Create an instance of the model Reservathrough the view CreateView, which will create a form to create said instance, but in the form I do not want the field to be displayed, empleado_de_turnoI want only the field to be displayed clienteand that by default the value of the field empleado_de_turnois the user that login at that time.

Well to fix the said problem, try modifying the data sent by the POST method, in the method get_form_kwargs:

class ReservaCreateView(CreateView):
    model = Reserva
    template_name = 'testapp1/example.html'
    fields = ['cliente']
    success_url = reverse_lazy('home')

    def get_form_kwargs(self):
        form_kwargs = super().get_form_kwargs()
        if form_kwargs.get('data'):
            user = User.objects.get(username = self.request.user)
            post = self.request.POST.copy()
            post['empleado_de_turno'] = str(user.pk)
            form_kwargs['data'] = post

        return form_kwargs

The thing is that it doesn't work for me, I always get this error:

django.db.utils.IntegrityError: NOT NULL constraint failed: testapp1_reserva.empleado_de_turno_id

I started trying to figure out where exactly the error occurred, because the method solution get_form_kwargsthat I showed before, should fix the error, and the error occurs in the method form_valid, specifically in the form.save(), here the source code of the method form_valid:

ModelFormMixin:

 def form_valid(self, form):
     """If the form is valid, save the associated model."""
     self.object = form.save()
     return super().form_valid(form)

FormMixin:

def form_valid(self, form):
    """If the form is valid, redirect to the supplied URL."""
    return HttpResponseRedirect(self.get_success_url())

IMPORTANT

I did the following with the intention of seeing how the data structure is when the instance was created, without omitting fields and when the field was omitted empleado_de_turno, in order to be able to replicate the structure when omitting said field and when modifying said data, and thus be able to solve the problem, avoiding errors

Case 1:

In the method form_valid, I printed form.datawhen the attribute fieldshad the following value:

fields = ['cliente']

Case 2:

Later I did the same but in this case the attribute fieldshad the following values:

fields = ['cliente', 'empleado_de_turno']

I printed the following in the data method form_valid, since this was where the error specifically arose and it was possible that the data was not being sent as I modified it previously:

def form_valid(self, form):
    print(form.data)

The result of printing it in the 2 cases was as follows:

<QueryDict: {'csrfmiddlewaretoken': ['SBRSJa0aw4iNJOMPwtQVsFL6V6y1cFMNGne9Kr0fA7YmtYeD8xshhDq6pc1mKjQs'], 'cliente': ['code2'], 'empleado_de_turno': ['1']}>

That means that whether you print form.datain Case 1 or in Case 2 , the data is exactly the same, which means that the problem is not the data at the time of modifying it, it is something else (I deduce).

Since even when printing form.is_validin the method form_valid, it returns True.

So , why does it give an error, if I am replicating the data structure correctly when modifying it? I do not find sense in this error, I am doing the whole modification process correctly.

Update:

Many think that in reality the field empleado_de_turnoexpects forman object in the or in the view, I sent an idand they may think that this is the error, but it is not.

First of all, I already tried it, instead of putting a idin the field empleado_de_turno, I put an object, and it gave the same error.

The reason that the field empleado_de_turnoexpects a idand not an object is because that is how the view manages it, at least when receiving the data through the POST method, I don't know why it manages it that way, that is how the developers decided of Django.

This can be verified in Case 2 , no field is omitted, the two fields are filled normally and form_validthe data entered is printed in the method as follows: form.data.

Printing it results in:

<QueryDict: {'csrfmiddlewaretoken': ['SBRSJa0aw4iNJOMPwtQVsFL6V6y1cFMNGne9Kr0fA7YmtYeD8xshhDq6pc1mKjQs'], 'cliente': ['code2'], 'empleado_de_turno': ['1']}>

It can clearly be seen that the key empleado_de_turnovalue is a id, not an object.

There you can check that the field empleado_de_turnodoes not expect an object as such, at least not at that stage of the view.

I am doing a guard in Angular 7 to verify if a user is logged in or not. Both the back and the request work correctly, however I can't control it inside the subscribe. This is the code I developed

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { LoginService } from '../login.service';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { StorageService } from '../storage.service';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor( private _login: LoginService,
               private _router: Router,
               private _session: StorageService) {}

  canActivate(): Observable<boolean> | boolean {

    this._login.isLogged()
    .subscribe(
      // Si la respuesta es un código HTTP 204, entonces está autorizado
      () => true,

      // Si la respuesta es un código HTTP 401 entonces NO está autorizado
      () => {
        this._session.deleteData();
        this._router.navigate(['/login']);
        return false;
      });
  }
}

The problem is that returndel .subscribedoesn't return true or false as canActivate(): Observable<boolean> | booleanI don't know how to return that Boolean

I get this error

A function whose declared type is neither 'void' nor 'any' must return a value.

I even tried to assign the value of subscribeto a variable to do returnat the end of canActivate(), however it is an asynchronous function so it finishes executing the code and does not wait for the response, I reiterate, everything works excellent, both the responses from the backend, and the function isLogged()which returns the Observableone I am subscribing to in the guard.

What I can do?

I also tried this function

return this._login.isLogged().pipe( map( (data: any) => {
  if( data.auth ) {
    return true;
  } else {
    this._session.deleteData();
    this._router.navigate(['/login']);
    return false;
  }
})
)

And now it works only if there is an HTTP 200, I can't control the 401 code

Is there a difference between the interfaces IEnumerable, ICollectionor IList?

At what point should each of the interfaces be used in my developments?