Java Qui Nhon

Dynamically Add Variable Name Value Pairs to JSON Object

Source: https://stackoverflow.com/questions/4071499/dynamically-add-variable-name-value-pairs-to-json-object

That's not JSON. It's just Javascript objects, and has nothing at all to do with JSON.

You can use brackets to set the properties dynamically. Example:

var obj = {};
obj['name'] = value;
obj['anotherName'] = anotherValue;

This gives exactly the same as creating the object with an object literal like this:

var obj = { name : value, anotherName : anotherValue };

If you have already added the object to the ips collection, you use one pair of brackets to access the object in the collection, and another pair to access the propery in the object:

ips[ipId] = {};
ips[ipId]['name'] = value;
ips[ipId]['anotherName'] = anotherValue;

Notice similarity with the code above, but that you are just using ips[ipId] instead of obj.

You can also get a reference to the object back from the collection, and use that to access the object while it remains in the collection:

ips[ipId] = {};
var obj = ips[ipId];
obj['name'] = value;
obj['anotherName'] = anotherValue;

You can use string variables to specify the names of the properties:

var name = 'name';
obj[name] = value;
name = 'anotherName';
obj[name] = anotherValue;

It's value of the variable (the string) that identifies the property, so while you use obj[name] for both properties in the code above, it's the string in the variable at the moment that you access it that determines what property will be accessed.

NgFor examples

Source: https://www.concretepage.com/angular-2/angular-2-ngfor-example

<b> *ngFor Demo</b>
<ul>
 <li *ngFor="let user of users">
  {{user.name}} - {{user.age}}
 </li>
</ul>

<b> ngFor with template Attribute </b>
<ul>
<li template = "ngFor let user of users; let i = index">
  Row {{i}} : {{user.name}} - {{user.age}}
</li>
</ul>

<b> ngFor with template Tag </b>
<ul>
 <template ngFor let-user [ngForOf] = "users"  let-i = "index">
   <li>  Row {{i}} : {{user.name}} - {{user.age}} </li>
 </template>
</ul>

<b>index variable demo </b>
 <p *ngFor="let user of users; let i = index">
  Row {{i}} : Name: {{user.name}}
 </p>

 <b>first and last variable demo </b>
 <div *ngFor="let user of users; let i = index; let f=first; let l=last;">
  Row {{i}} : Name: {{user.name}}, is first row: {{f}}, is last row: {{l}}
 </div>

 <b>even and odd variable demo </b>
 <div *ngFor="let user of users; let i = index; let e=even; let o=odd;">
  Row {{i}} : Name: {{user.name}}, is even row: {{e}}, is odd row: {{o}}
 </div>

<br/><b>ngFor with component element using *ngFor</b>
<emp-app *ngFor="let user of users" [emp]="user"> </emp-app>

<br/><b>ngFor with component element using template directive </b>
<emp-app template="ngFor let user of users" [emp]="user"> </emp-app>

<br/><b>ngFor with component element using template tag </b>
<template ngFor let-user [ngForOf]="users">
  <emp-app [emp]="user"></emp-app>
</template>

Iterate over array of objects in Typescript

Source: https://stackoverflow.com/questions/46213989/iterate-over-array-of-objects-in-typescript

You can use the built-in forEach function for arrays.

Like this:

//this sets all product descriptions to a max length of 10 characters
data.products.forEach( (element) => {
    element.product_desc = element.product_desc.substring(0,10);
});

Your version wasn't wrong though. It should look more like this:

for(let i=0; i<data.products.length; i++){
    console.log(data.products[i].product_desc); //use i instead of 0
}

What is sr-only in Bootstrap 3?

Source: https://stackoverflow.com/questions/19758598/what-is-sr-only-in-bootstrap-3

According to bootstrap's documentation, the class is used to hide information intended only for screen readers from the layout of the rendered page.

Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only class.

Here is an example styling used:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

Is it important or can I remove it? Works fine without.

It's important, don't remove it.

You should always consider screen readers for accessibility purposes. Usage of the class will hide the element anyways, therefore you shouldn't see a visual difference.

If you're interested in reading about accessibility:

Angular 2 - Click to show and hide

Source: https://stackoverflow.com/questions/43544910/angular-2-click-to-show-and-hide

You could use a function to change from true to false and vice versa instead of just setting showHidetrue each time you click the button.

To do so you need to create a function e.g. changeShowStatus to change the value of showHide.

changeShowStatus(){
    this.showHide = !this.showHide;
  }

Then you call this function every time you hit the button by changing your showHide=true to changeShowStatus():

<button type="button" (click)="changeShowStatus()">show/hide</button>

To set the initial status you could set the showHide value in the constructor and define showHide just as boolean:

export class App {
  ...
  showHide: boolean;

  constructor() {
    this.showHide = true;
  }
  ...
}

ngx-bootstrap Datepicker Format Value

Source: https://github.com/valor-software/ngx-bootstrap/issues/868

Two way binding

on my submit function I change the format of my model value to MM/dd/yyyy ie 01/01/2018
const date = new Date(this.pilot.dob);
this.pilot.dob = moment(date).format('MM/DD/YYYY');

More about moment at https://momentjs.com/docs/#/displaying/format/