How to put object into another object Angular / Javascript

Question

I'm making an app and I'm stuck when trying to push an array into another array. I get an error "Cannot read property 'push' of undefined."

This is the object :

export var CARDS: any[] = [
     {
        channel: "facebook"
        date: "2016-01-07"
        comments: [
            { 
               content: "Hey would you look at this card?",
               user: "John Appleseed",
               avatar: "url"
            },
            { 
               content: "I like this card!",
               user: "John Doe",
               avatar: "url"
            }
        ]
     },
     {
        channel: "facebook"
        date: "2016-01-07"
        comments: [
            { 
               content: "Hey would you look at this card?",
               user: "Jane Doe",
               avatar: "url"
            }
        ]
    }];

I have an option in my app to add a comment to a card. Therefore I created:

newComment = {
    content: "",
    user: "",
    avatar: ""
  };

And with a button I call the submitComment function:

submitComment(comment) {
    console.log(this.newComment);
    this.comment.push(newComment);
}

My HTML looks like this (fyi: I'm working with ionic, that explains the ion-input)

 <ion-input type="text" placeholder="Type a comment..."  [(ngModel)]="newComment.content"></ion-input> 
 <button (click)="submitComment(comment)">Send comment</button>

I did a console.log in my submitComment function and it displays the right information. But the push doesn't work. I get an error 'Cannot read property 'push' of undefined. I tried "this.newComment" between the brackets, but it's not working either.

I'm just starting to know Angular/JS, so it's probably something simple I just cannot figure out. Thanks in advance for your help :-)

EDIT: I forgot to add. I do an *ngFor="let comment of card.comments" to display al the comments. Therefore I just use the "comment" in further HTML.

You have duplicate keys. This will override previous value.

Rajesh Dixit
– Rajesh Dixit

2016-07-05 07:57:41 +00:00
Commented Jul 5, 2016 at 7:57 — Rajesh Dixit
– Rajesh Dixit, Commented Jul 5, 2016 at 7:57

Thierry Templier · Accepted Answer · 2016-07-05 07:59:34Z

3

Your problem is because the comment variable you provide to the submitComment method is null. So you can't call any method (specially push) on it...

Otherwise your CARDS property doesn't seem to be correctly defined. You would define it this way rather:

CARDS: any [] = [
  {
    channel: "facebook"
    date: "2016-01-07"
    comments: [
      { 
        content: "Hey would you look at this card?",
        user: "John Appleseed",
        avatar: "url"
      },
      { 
        content: "I like this card!",
        user: "John Doe",
        avatar: "url"
      }
    ]
  },
  {
    channel: "facebook"
    date: "2016-01-07"
    comments: [
      { 
        content: "Hey would you look at this card?",
        user: "Jane Doe",
        avatar: "url"
      }
    ]
  }
];

edited Jul 5, 2016 at 7:59

answered Jul 5, 2016 at 7:57

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

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

2 Comments

J.DD Over a year ago

Thanks for such a quick response Thierry! What would you recommend? How can I push the newComment array to my existing card.comments?

Thierry Templier Over a year ago

You're welcome! Just put it in the array ;-) Something like this in your submitComment method: card.comments.push(this.newComponent);. I don't know where card comes from but you need to be able to reference it either from the component itself or by providing it as parameter of the method (if it's within ngFor for example)...

J.DD · Accepted Answer · 2016-07-05 08:22:54Z

0

Thanks to Thierry I fixed my problem. :-) I looked over a little thing in my code. Here's the solution, for everyone with the same problem.

My problem was within the value I gave with my click function. I first had

(click)="submitComment(comment)"

But 'comment' was undefined. I thought my ngFor="let comment of card.comments" would define it, but my click function was outside the ngFor. Therefore I had to create

(click)="submitComment(card)"

And in my typescript file the following:

 submitComment(card) {
    console.log(this.newComment);
    card.comments.push(this.newComment);
  }

answered Jul 5, 2016 at 8:22

J.DD

3882 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to put object into another object Angular / Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related