Angular Adding data to and object add runtime not inserting data

Question

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?

score 1 · Accepted Answer · answered Jul 06 '22 at 18:07

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

SickerDude43 · Answer 2 · 2022-07-06T17:54:25.690

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

If you've got further questions add a comment under this and I'll look into it — SickerDude43, Jul 06 '22 at 17:55

TheArchitect · Answer 3 · 2022-07-06T17:58:15.420

0

You just have to change your add method:

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

edited Jul 06 '22 at 17:58

answered Jul 06 '22 at 17:32

TheArchitect

58
6

If you look at the data ... at the bottom...you'll see: data: this.newData // DATA NEEDS TO BE ADDED HERE ... this.newData is populated by the add() function...I need to insert that data into the object and display it. – zaknio55 Jul 06 '22 at 17:35
Oh okay, it's simple then, I edit the answer to explain it to you. – TheArchitect Jul 06 '22 at 17:55

Angular Adding data to and object add runtime not inserting data

3 Answers3