I've been getting into angular recently and I would like to know what is the best way to capture and display the errors I receive from a REST API server, I have the following:

Service

import { Injectable } from '@angular/core';
import { Usuario } from 'src/app/models/usuario.model';
import { HttpClient } from '@angular/common/http';


@Injectable({
  providedIn: 'root'
})
export class UsuarioService {

  constructor(public _http: HttpClient) {}

  crearUsuario( usuario: Usuario){

    let url = `http://localhost:3000/usuario`;

    return this._http.post(url, usuario);

  }

}

Component

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { UsuarioService } from '../services/service.index';
import { Usuario } from '../models/usuario.model';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./login.component.css']
})
export class RegisterComponent implements OnInit {

  forma: FormGroup;

  constructor( public _usuarioService: UsuarioService) { }

  ngOnInit() {

    this.forma = new FormGroup({
      // Valor por defecto y validaciones
      nombre: new FormControl('test', Validators.required ),
      correo: new FormControl('[email protected]', [Validators.required, Validators.email]),
      password: new FormControl('123456', Validators.required),
      confPassword: new FormControl('123456', Validators.required),
      condiciones: new FormControl(true)
    }, { validators: this.verificarPassword('password', 'confPassword')});

  }

  verificarPassword( campo1: string, campo2: string){
    return ( group: FormGroup) => {
      let pass1 = group.controls[campo1].value;
      let pass2 = group.controls[campo2].value;

      if( pass1 === pass2 ) return null;

      return {
        sonIguales: true
      }
    }
  }

  registrarUsuario(forma: FormControl){
    console.log(forma);

    let usuario = new Usuario(
      this.forma.value.nombre,
      this.forma.value.correo,
      this.forma.value.password
    )

    this._usuarioService.crearUsuario(usuario).subscribe( result =>{


      console.log(result );

    });

  }

}

The error returned is a status 500if there is a failure in the registration and a status 200if the request is successful.

What I want to do is give the user more clarity when creating the account, showing where the error comes from, in this case it would be because the email already exists.

first of all, Thanks :)

I capture a date in format yyy-mm-dd (2016-06-30)and I want to give it a more friendly format for the user, I look for the following:

2016-06-30 = 6 de Junio del 2016 
2016-06-30 = Junio (Mostrar el mes dada la fecha)
2016-06-30 = Jueves (Mostrar el día, suponiendo que el 06 sea Jueves).

I am trying to transform a JSON object to a javascript array, where the array would consist of the keys and values ​​in the object. I have done it in different ways and I have not succeeded.

//Objeto Json
[
 {dato: 'asdasd'},
 {dato:'234234'}
]

The desired result would be something like this:

//Array 
[
 [dato, 'asdasd'],
 [dato, '234234']
]

I have used the typeofwith different methods but always the result of this isobject

I try to get the dataUrl (something similar to what this page link does ) of a graph generated with Google Charts and save it in a variable, the graph is generated as follows:

    var result;
    google.charts.load("current", {packages:['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = google.visualization.arrayToDataTable([
        ['Ciudad', 'Poblacion'],
        ['Tulua', 12312 ],
        ['Bogota', 22222 ]
      ]);

      var options = {
        title: "Max Poblacion",
      };

      var chart_div = document.getElementById('chart_div');
      var chart = new google.visualization.PieChart(chart_div);

      
      google.visualization.events.addListener(chart, 'ready', function () {
        chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
        console.log(chart.getImageURI());
        result = chart.getImageURI();
      });
      
      chart.draw(data, options);
  }
console.log(result);

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id='chart_div'></div>

I can show what I need but I can't save it in a variable, because when I try to do it it shows me that it is undefined.

Is it necessary to display the chart in a div to get its dataUrl chart.getImageURI()?

I have a vector in which I try to eliminate the spaces that are empty in their entirety, something like this:

array[0][0:"6371", 1:"2016-05-31", 2:"Juan Jose  Mendoza"];
array[1][0:"", 1:"", 2:""];
array[2][0:"6372", 1:"2016-05-31", 2:"Andrea Marcela Pena"];

what I am looking for is the way to eliminate the empty line and re-arrange the vector in a simple way (without the need to go through it or something like that) either in php or javascript the final result would be something like this:

array[0][0:"6371", 1:"2016-05-31", 2:"Juan Jose  Mendoza"];
array[1][0:"6372", 1:"2016-05-31", 2:"Andrea Marcela Pena"];

where the position array[1][0:"", 1:"", 2:""];, having all its fields empty, will be removed and we will rearrange the vector.

I need to find the difference in days between two dates, which I have as follows:

// el formato de estas es (yyyy-mm-dd)
// Corresponden al 12 de julio del 2016 hasta el 1 de agosto del 2016
var fechaInicio = '2016-07-12';
var fechaFin    = '2016-08-1';

If I try to subtract them as I have them there, the result is NaN. How could I solve it?

I want to send an associative array through an event onclick, when I send it, when I capture it, it appears, [object object]so I try to send it stringusing type JSON.stringify(), I do it in the following way:

onclick event

$('#div').html('<div class="col-xs-6 text-center"><a href="#" class="on-primary edit-row" onclick=\' mostrarDatos("'+JSON.stringify(datos)+'"); \'><i class="fa fa-pencil" aria-hidden="true"></i></a></div>');

This is how it shows when I capture the error in the console

mostrarDatos("[{"id":"1","nombre":"Prueba","direccion":"calle 2 av Siemprevivas","telefono":"123332123","observaciones":"Asdasdasdasdas","correo":"[email protected]","fechaInicio":"2016-07-01","fechaFin":"2017-02-08","logo":"archivos/mpg.jpg","costo":"9","estado":"1","Municipio_id":"1259","Estado_id":"777","Empresa_id":"2","municipio":"Cali"}]"); 

This is the error that shows me in the console

I am trying to emulate a class in javascript , I want to call a function that I have already set in the same document through an event onclick, I have the following:

function clase(){


// Consultar
this.consultar = function() {

    $.ajax({
        type: 'POST',
        url: 'url',
        dataType: 'html',
        data: { consulta: query },
        beforeSend:function(){

        },
        success:function(response){
            // omito lo anterior por que hasta acá esta todo bien
            // el problema lo tengo al momento de hacer llamar la función
            var datos = JSON.parse(response);

            // datatable
            var idTabla = $('#tabla').DataTable({ 
                lengthMenu:[[5,10],[5,10]]
            });
            // limpio el datatable
            idTabla.row().clear();
            for (var i = 0; i < datos.length ; i++) {
            // inserto los datos en el datatable
                idTabla.row.add([  
                    datos[i].documento,
                    datos[i].nombre+" "+datos[i].apellidos,
                    datos[i].correo,
                    datos[i].telefono,
                    datos[i].email,
                    // creo una etiqueta <a></a> y en este llamo un evento "onclick" en el cual deseo llamar la otra funcion
                    '<a href="#" class="on-primary edit-row" onclick=\' this.estado("'+datos[i].id+'", "'+datos[i].estado+'"); \'><i id="'+datos[i].id+'"class="fa fa-check" aria-hidden="true"></i></a>'
                ]);
            }
            idTabla.draw(true);
        }
    });
}

this.estado = function(id, estado){

    $.ajax({
        type: 'POST',
        url: "url",
        dataType:"html", 
        async: true,
        data: { 
            id:id, 
            ingresoNuevo: 3, 
            estado: estado 
        },
        beforeSend:function(){
            $("#"+id).removeClass().addClass( "fa fa-refresh fa-spin" );
        },
        success:function(response){
            // llamo la función de consulta para volver a mostrar la tabla esta ves con el estado actualizado
            this.consultar();
        }
    });
}


}

It should be noted that some data is missing, but I omitted it because I think it is irrelevant to the question since what I am looking for is to know how I can call the function estadoin the `onclick event.

I want to validate the emails that I have in a text field but I have not found why it gives me an error when the email is supposed to be valid, for this I use a script.
this is what i'm doing

// funcion para validar el correo
function caracteresCorreoValido(email, div){
    console.log(email);
    var email = $(email).val();
    var caract = new RegExp(/^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/);

    if (caract.test(email) == false){
        $(div).hide().removeClass('hide').slideDown('fast');

        return false;
    }else{
        $(div).hide().addClass('hide').slideDown('slow');
//        $(div).html('');
        return true;
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

 <div class="panel-body">
                    <form class="form-horizontal m-t-20 toggle-disabled" onsubmit="validacionLogin(); return false;" method="post" >

                        <div class="form-group">
                            <div class="col-xs-12">
<!--                                <label class="control-label">E-mail</label>-->
                                <input class="form-control input-lg" type="email" id="email" name="email" data-validation="email"  placeholder="Introduce tu correo electronico">
                                <div id="xmail" class="hide"><h6 class="text-danger">Ingresa un email valido</h6></div>
                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-xs-12">
<!--                                <label class="control-label">Contraseña</label>-->
                                <input class="form-control input-lg" type="password" id="password" name="password" data-validation="required" placeholder="Contraseña">
                            </div>
                        </div>

                        <div class="form-group text-center m-t-40">
                            <div class="col-xs-12">
                                <button type="submit" class="btn btn-primary btn-lg w-lg waves-effect waves-light" >Iniciar sesión</button>
                            </div>
                        </div>

                    </form> 
                </div>

<script>
   // cuando pierde el foco, este valida si lo que esta en el campo de texto si es un correo o no y muestra una respuesta
   $('form').find('input[type=email]').blur(function(){
      caracteresCorreoValido($(this).val(), '#xmail')
    });
</script>

I want to add the css styles that an application has with jquery , I have tried in the following way but I have not been able to get it to work:

// Llamó los al "<links/>" al index, por medio de una funcion que tengo establecida en un 
// documento js
    <script>
        $(function(){
            var inicio = new Index();
            inicio.cssLib();
        });
    </script> 

js

function Index(){

 this.cssLib = function(){   
    // he intentado hacerlo con un after y aca con un append pero no he tenido 
    // éxito
    // (no estoy seguro que el append funcione de esta forma, pero quise intentarlo)
    $('title').append(function(){
        $(this).load("assets/links/cssLinks.html");
    });
  }
}

I try to find a specific word in a text string which I get by capturing the name of a file that I load in a tag of type file ( type="file) to perform a condition which marks me as selected a select if the file name has any of the values ​​that it has:

$('#archivoFRR').change(function(){
  var file = $(this).val();
  console.log(file);
  // aqui deberia de ir el condicional donde compare la cadena de texto (el nombre del archivo) con
  // la palabra que deseo en este caso seria "1" es decir si encuentro "1"
  // en el nombre del archivo este me seleccionara la opcion que tenga como valor "1"
  if('' == '1'){
    $("select option[value='1']").attr("selected","selected");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="archivoFRR"  name="archivoFRR" >
<br>
<br>
<select id="select" name="select" >
   <option value="1">Facturación</option>
   <option value="2">Recaudo</option>
   <option value="3">ReFacturación</option>
</select>

I'm changing the content of a button on click, but I can't find a way to reposition the initial content after clicking it again. I use toggle to do some actions but when it comes to changing the content I haven't had any luck:

  // JQuery 
  $('#showResponse').click(function(event) {
     $('#showSend').toggle();
     $('#showResponse').toggleClass("btn-danger", "btn-primary");
     $('#showResponse').html('Volver <i class="fa fa-chevron-up" aria-hidden="true"></i>');
  });

 <!-- HTML -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

                    <div class="row ">
                        <div class="col-md-12 text-center m-b-15">
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md" id="showResponse">Responder <i class="fa fa-chevron-down" aria-hidden="true"></i></button>
                            <button type="button" class="btn btn-primary waves-effect waves-light w-md resizeDiv" id="showSend">Enviar <i class="fa fa-paper-plane" aria-hidden="true"></i></button>
                        </div>
                    </div>

What I intend is that when clicking on it again, it reloads the initial content (reply)

I am looping through the body of an html table and I want to capture the position of the ( td ) where the selects are selected, this happens in a jquery click event . I have the following:

                //creo el objeto
                 var objetoSelects = new Object();
                 $('#vistaPre tbody tr').each(function (index) {
                    $(this).find("td").each(function(i, el) {
                        // .selectOptions son selects que tengo en un td de la tabla
                        $('.selectOptions').find(':selected').each(function(j, el) {
                            $this = $(this).val();
                            if ($this != '') {

                             // intento crear las posiciones del objeto

                             objetoSelects.$this = j;

                             objetoSelects.selects = $this;

                            }

                        });
                        // salgo del each
                        return false;
                    });
                    // salgo del each
                    return false;
                });

My intention is to create an object like this:

// $this es el valor del select ejemplo ('item1')
// j es el contador en este caso la posición actual del <td>
// selects es el valor que le deseo dar a mi otro dato (creo que no esta bien)
objetoSelects(itemx = x, 'selects' = itemx);

I can't find a way to do it.

UPDATE

Based on the answers, I found a way to do it, below is the way I solved the problem

                // cree arrays para guardar la posición del <td> y el valor del select
                var arraySelects  = [];
                var arrayPosition = [];

                $('#vistaPre tbody tr').each(function (index2) {
                    $(this).find("td").each(function(i, el) {
                        //
                        $('.selectOptions').find(':selected').each(function(j, el) {
                            $this = $(this).val();
                            if ($this != '') {

                                //agrego los datos correspondientes
                                arrayPosition.push(j);
                                arraySelects.push($this);

                            }

                        });
                        return false;
                    });
                    return false;
                });
                // creo el objeto y le asigno los valores
                var datoSelect = { 'position': arrayPosition, 'selects': arraySelects};

I am creating the rows of a table with the DataTable Jquery library and I want to add a style to a row, I generate the rows in this way.

      // idTabla es una variable que la envió desde la vista **var idTabla = DataTable();**
            idTabla.row().clear();
            for (var i = 0; i < datos.length ; i++) {
                if (datos[i].estado == '1') {
                    var icon = "<i class='fa fa-check' id='loadState"+datos[i].id+"'></i>";
                }else{
                    var icon = "<i class='fa fa-ban' id='loadState"+datos[i].id+"'></i>";
                }
                //
                idTabla.row.add([
                                    datos[i].id,  
                                    datos[i].nombre,
                                    "<div class=' text-center col-md-12'><a href='#' id='editarObservacion"+datos[i].id+"' class=' ' onclick='activarDesActivarElect(\""+datos[i].id+"\", \"2\", \"loadState"+datos[i].id+"\", \""+id+"\", \""+datos[i].estado+"\")'> "+icon+" </a></div>"
                                ]);
            }
            idTabla.draw(true);

The intention of the above is that when you enter the else add a different font color to the entire row and in this way identify the data that enters with the status != 1

I want to use css font icons (font awesome, glyphicons) as markers on google maps. I have tried to use a tag calling the class but it doesn't work, is this possible?

I have done it this way:

 var marker = new google.maps.Marker({
    position: new google.maps.LatLng(parseFloat(latitud), parseFloat(longitud)),
    map: mapa,
    animation: google.maps.Animation.DROP,
    icon:'<i class="fa fa-map-marker"></i>',
    title: titulo
});

Any input would be of great help.

I would like to know how I could change the language of select2, at the moment when it does not find results it shows me this message.

https://select2.github.io/ ... this is the plugin page but at the moment I haven't found anything that shows me clearly how to do it. Thank you very much in advance