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?

martin66 · Accepted Answer · 2022-07-06 18:07:09Z

1

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

answered Jul 6, 2022 at 18:07

martin66

3873 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SickerDude43 · Accepted Answer · 2022-07-06 17:54:25Z

0

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

edited Jul 6, 2022 at 17:54

answered Jul 6, 2022 at 17:30

SickerDude43

19610 bronze badges

1 Comment

SickerDude43 Over a year ago

If you've got further questions add a comment under this and I'll look into it

TheArchitect · Accepted Answer · 2022-07-06 17:58:15Z

0

You just have to change your add method:

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

edited Jul 6, 2022 at 17:58

answered Jul 6, 2022 at 17:32

TheArchitect

687 bronze badges

2 Comments

zaknio55 Over a year ago

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.

TheArchitect Over a year ago

Oh okay, it's simple then, I edit the answer to explain it to you.

Collectives™ on Stack Overflow

Angular Adding data to and object add runtime not inserting data

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related