Angular 6 Store Data from Json Array Inside Json

angular 6 store data from json array inside json

In your model coffee.ts, location and tastingRating are not arrays, but in the JSON you are receiving, those properties are arrays.

Change the types of location and tastingRating to arrays of their respective types and it should work.

coffee.ts:

import { TastingRating } from './TastingRating';
import { PlaceLocation } from './PlaceLocation';

export class Coffee {
 _id: string;
coffeetype: string;

rating: number;
notes: string;
tastingRating: TastingRating[]; // changed to array

constructor (
public  name: string = '',
public  place: string= ''  ,
public  location: PlaceLocation[] = null // changed to array
) {

  this.location = new Array<PlaceLocation>(); // creating array of PlaceLocation type
  this.tastingRating = new Array<TastingRating>(); // creating array of TastingRating type
}
}

Also, _id property is missing in both PlaceLocation and TastingRating classes. Add this property to both these classes.

In the response you are receiving, sweetness property of TastingRating class is missing. Have the response include this property or make it optional, like sweetness?: number;

Get and store JSON data via HttpClient in Angular 6

I finally found the solution. The subscribe function has 3 parameters, second and third are optional. The second parameter is when an error occurs and the third parameter is when the all of data is received and at this time we can print the tempArray:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface DataResponse {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor( private http: HttpClient ) {}

  ngOnInit(): void { 

    var tempArray: DataResponse[] = [];
    this.http.get('http://jsonplaceholder.typicode.com/todos').subscribe(
      data => {
                for (var i=0; i<10; i++)  
                  tempArray.push(<DataResponse>data[i]);     
              },
      error=> { 
                console.log("Error in recieving data"); 
              },
      ()   => {
                console.log( tempArray[0] );
              }
    );
  }
}

How to post an object to an array in a json using Angular 6

You have some strange things in your code. First :

In you API

return this.http.get<Test[]>("http://localhost:3000/customers", {params}).pipe(map(res => res));

I think what you want to do here is : (the pipe is useless you dont use it and it's not an array)

return this.http.get<Test>("http://localhost:3000/customers",{params});

In your component you want to push the update trainData list

submitForm(){
    const lastTrainData = this.test.trainData[this.test.trainData.length-1];

    const newTrainData = this.testForm2.value;
    newTrainData.id = lastTrainData.id + 1;

    this.test.trainData.push(newTrainData);

    this.TestService.postTests(this.test);
  }

How to get specific data from json object in array (Local Storage) - Angular 7

You can use a simple .map() to extract an array only containing the prices, and a reduce() to add up the total. Example below.

---

Solution

public ngOnInit(): void
{
  if(this.cartService.getFromLocalStrorage())
  {
    this.cartItems = this.cartService.getFromLocalStrorage(); 
    console.log(this.cartItems); //result show in below  

    const prices = this.cartItems.map(data => data.productPrice); 
    console.log(prices); // array of all the prices

    const total = prices.reduce((a, b) => a + b));
    console.log(total); // total prices from array of prices
  }
}

To update the value in the local store you can filter the array and re-save it.

this.cartItems = this.cartItems.filter(data => data.productId !== 3);
localStorage.setItem('cartObject', JSON.stringify(this.cartItems));

---

Documentation

.map() // .reduce() // setting item by key in local storage // .filter()

---

Edit

For the multiplication including quantity of each product add it into the map

const prices = this.cartItems.map( data => (data.productPrice * data.productQuantity) ); 
console.log(prices); // array of all the prices

Then once again use the reduce() function on this for the total prices of all including quantity.

Angular 6 Http Observable of JSON (array object into object) - *ngFor does not work

The array you want is in the result's data property, so you'll need to iterate over that or just assign right away:

getUsers(): void {
  this.usersService.getUsers()
    .subscribe(result => this.users = result.data);
}

Access specific object from array of objets via json file in angular 6

getData goes in service, getDataInfo goes in component and then in component you can create variable myDataInfo and just on line where you return data do this

this.myDataInfo = data[i]

OR

same as above with service and component method, but you can store your data to some variable eg. this.myJsonData

and then you can do something like this

get myDataInfo() {
    return this.myJsonData.filter((item) => item.modName=='deployment')[0]
}

and the you just can use that object in your template easy.

Angular 6 ngFor select object on a nested JSON

You can use keyValue pipe to iterate objects - I think this pipe is available from angular 6.1

Try something like this

<select id="categories" class="form-control">
  <option value="">Please select an item</option>
  <option
    *ngFor="let item of this.categoryObj | keyvalue; let i = index"
    value="{{ item.key }}"
    >{{ item.value.name }}</option
  >
</select>

I think this might help you - but make sure this pipe seems to be impure

For more info check this - Happy new year and happy coding :)

---

Related Topics