Angular Adding data to and object add runtime not inserting data-CodePudding

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?

CodePudding user response：

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;
}

CodePudding user response：

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);

CodePudding user response：

You just have to change your add method:

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