无法将项目添加到数组

Question

How can I add a new item to an array? I'm trying to add an item but it returns an error. Please see my screenshot below and my code.

Screenshot

JavaScript Code

var roles = [{id: 8, display_name: "test", description: "test", created_at: "2020-02-20 11:34:22", updated_at: "2020-02-20 11:34:22"}
8: {id: 9, display_name: "ASDASD", description: "ADASD", created_at: "2020-02-20 11:39:08", updated_at: "2020-02-20 11:39:08"}
9: {id: 10, display_name: "Test1", description: "test1", created_at: "2020-02-20 11:44:01", updated_at: "2020-02-20 11:44:01"}
10: {id: 11, display_name: "Test2", description: "test2", created_at: "2020-02-21 04:18:49", updated_at: "2020-02-21 04:18:49"}
11: {id: 12, display_name: "Test3", description: "test3", created_at: "2020-02-21 06:56:52", updated_at: "2020-02-21 06:56:52"}
12: {id: 13, display_name: "Test4", description: "test4", created_at: "2020-02-21 07:00:32", updated_at: "2020-02-21 07:00:32"}];


this.roles.id = 12;
this.roles.display_name = 'Mod';
this.roles.description = 'mod';
this.roles.created_at = '2020-02-21 07:12:50';
this.roles.updated_at = '2020-02-21 07:12:50';

Error

TypeError: Cannot set property 'id' of undefined

What I want :

Add item to the data from the screenshot above.

Note

I'm using vueJS, and I have set the roles data inside of data{} object.

Answer 1

It looks like this.roles is probably the array of items you're logging, right?

So by setting this.roles.id = 12; , you're trying to set an id property of the array, not add a new item to the array with those properties.

Try this

var newRole = {
  id: 12,
  display_name: 'Mod',
  description: 'mod',
  created_at: '2020-02-21 07:12:50',
  updated_at: '2020-02-21 07:12:50'
};

this.roles.push(newRole);

That's my best guess. You really should upload more info about the problem though:

• What are you logging in that screenshot?
• What about your current approach doesn't work?

Answer 2

Here's a solution,
I've created your sample role array of objects,
Created a new object to be added,
and then added the new object to the array.

let roles = [
    {
        "id" : 1,
        "display_name" : "One",
        "description" : "One desc",
        "created_at" : "2020-02-21 01:01:01",
        "updated_at" : "2020-02-21 01:01:01"
    },
    {
        "id" : 2,
        "display_name" : "Two",
        "description" : "Two desc",
        "created_at" : "2020-02-21 01:01:01",
        "updated_at" : "2020-02-21 01:01:01"
    }
];

let newRole = {};
newRole.id = 3;
newRole.display_name = "Three";
newRole.description = "Three desc";
newRole.created_at = "2020-02-21 01:01:01";
newRole.updated_at = "2020-02-21 01:01:01";

roles.push(newRole);

You are directly trying to add an object into the array,
You can do that as well if you specify the index

Answer 3

This is an array of json elements. You need to make an element first and then push it in the array of roles like this.

let newElement = {id:12, display_name :'Mod', description : 'mod', created_at:'2020-02-21 07:12:50', updated_at:'2020-02-21 07:12:50'}
this.roles.push(newElement)

Answer 4

You got undefined error since your using "this" which refers to the window and not to the object.

You can add it manually as you already got the answers for it or you can use Class instead which in my opinion will work way better, I don't think that using all those code copying is good, that's my solution:

const roles = [{ id: 8, display_name: "test", description: "test", created_at: "2020-02-20 11:34:22", updated_at: "2020-02-20 11:34:22" },
{ id: 9, display_name: "ASDASD", description: "ADASD", created_at: "2020-02-20 11:39:08", updated_at: "2020-02-20 11:39:08" },
{ id: 10, display_name: "Test1", description: "test1", created_at: "2020-02-20 11:44:01", updated_at: "2020-02-20 11:44:01" },
{ id: 11, display_name: "Test2", description: "test2", created_at: "2020-02-21 04:18:49", updated_at: "2020-02-21 04:18:49" },
{ id: 12, display_name: "Test3", description: "test3", created_at: "2020-02-21 06:56:52", updated_at: "2020-02-21 06:56:52" },
{ id: 13, display_name: "Test4", description: "test4", created_at: "2020-02-21 07:00:32", updated_at: "2020-02-21 07:00:32" }];

class Role {
    id;
    display_name;
    description;
    created_at;
    updated_at;
    constructor(id, display_name, description, created_at, updated_at) {
        this.id = id;
        this.display_name = display_name;
        this.description = description;
        this.created_at = created_at;
        this.updated_at = updated_at;
    }
}

const role1 = new Role(14, "asdas", "asdasd", "2020-02-21", "2020-02-21");
roles.push(role1);
const role2 = new Role(15, "asdasas", "assdasd", "2020-02-21", "2020-02-21");
roles.push(role2);