0

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 enter image description here

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.

Improve this question
5
  • what are you doing? what error do you get? please add your code. Commented Feb 21, 2020 at 8:35
  • Hi @NinaScholz please see my update. Commented Feb 21, 2020 at 8:39
  • What you have is an array of objects. JSON is a data exchange format like YAML or CSV. You might want to read up on Arrays on MDN. Commented Feb 21, 2020 at 8:49
  • Why are you using this.roles instead of roles? Commented Feb 21, 2020 at 8:57
  • @FelixKling sorry I forgot to mention that it is inside of data{} object. I'm using vuejs here. Please see my update. Commented Feb 21, 2020 at 9:01

4 Answers 4

Reset to default
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?
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

I tried it just now, and I get TypeError: Cannot read property 'push' of undefined error.
@Jonjie: Your code example looks incomplete. What does this refer to?
this.roles is not available. Since he's not in an object, this will return the window object, and there is not a roles attribute in it.
@Refilon: There will be if roles is a global variable.
@FelixKling but in the example it's not.
|
1

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)
Improve this answer

2 Comments

"This is an array of json elements." It's an array of objects. There is no JSON here. JSON is a textual data exchange format.
this.roles is not available. Since he's not in an object, this will return the window object, and there is not a roles attribute in it.
1

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

Improve this answer

Comments

0

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);
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.