CODEWITHSUNDEEP
angulartypescriptangular14
zaknio55
zaknio55

Reputation: 71

Angular Adding data to and object add runtime not inserting data

I am trying to add data to an object with a button click but nothing is happening.

Here is the code:

HTML:

{{ data | json }}

<button (click)="add()">Add Data</button>

TS:

import { Component } from '@angular/core';

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

  newData: any[] = [];
  
  data = [
    {
      id: 1,
      name: 'cars',
      data: [
        { description: 'Honda' },
        { description: 'Mini' },
        { description: 'Vaux' }
      ]
    },
    {
      id: 2,
      name: 'bands',
      data: [
        { description: 'Band 1' },
        { description: 'Band 2' }
      ]
    },
    {
      id: 3,
      name: 'animals',
      data: [
        { description: 'Dog' },
        { description: 'Cat' }
      ]
    },
    {
      id: 4,
      name: 'names',
      data: this.newData // DATA NEEDS TO BE ADDED HERE
    }
  ]


  add() {
    this.newData = [
      { description: 'Tom' },
      { description: 'Paul' },
      { description: 'Frank' }
    ]
  }

}

Nothing happens when I click add(). I've also checked the console for any issues there and there are not issue reported in the console.

How can I fix this?

Upvotes: 0

Views: 883

Answers (3)

martin66
martin66

Reputation: 387

In your 'add' method you need to assign the new data

add(){

    this.newData = [
      { description: 'Tom' },
      { description: 'Paul' },
      { description: 'Frank' }
    ];

    //add the `newData` to the 3 element of the `data` array
    this.data[3].data = this.newData;
}

Upvotes: 1

TheArchitect
TheArchitect

Reputation: 68

You just have to change your add method:

 add() {
  this.newData.push([
   { description: 'Tom' },
   { description: 'Paul' },
   { description: 'Frank' }
  ]);
 }

Upvotes: 0

SickerDude43
SickerDude43

Reputation: 196

I see that your Code is missing a constructor. Define the data array outside of it and then initialize with your hardcoded data.

For the add Methode you simply push into your existing Array. Try this in your add Method.

const obj = {
  id: 4,
  name: 'names',
  data: this.newData;
}
data.push(obj);

initialize your data array in your constructor, declare it outside as a variable.

data: object[]; // You should really not do it like this, look below
constructor() {
data = [ YOUR HARDCODED DATA HERE ]
}

EDIT: I'm not sure if any[] is the right type. Maybe define a class for the data fields you want in your Array, something like this.

class DataFields {
constructor(
public id: number,
public name: string,
public data: string[]
) {}
}

Then declare your data Array as a type of your class like this. Best practice is to create a model and then import it into your ts file you want to work with.

data: DataFields[];

Hope this helps now!:) (Don't forget to edit the code above and simply create an Object of DataFields with the new Operator and pass your data inside the parameters)

const dataToPush = new DataFields(4, 'names', this.newData);

Upvotes: 0

Related Questions