Comment puis-je ajouter un nouvel élément à un tableau? J'essaye d'ajouter un article mais cela renvoie une erreur. Veuillez voir ma capture d'écran ci-dessous et mon code.
Capture d'écran
Code JavaScript
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';
Erreur strong >
TypeError: Impossible de définir la propriété 'id' sur undefined
Ce que je veux :
Ajouter un élément aux données de la capture d'écran ci-dessus.
Remarque
J'utilise vueJS et j'ai défini les données roles à l'intérieur de l'objet data {} .
4 Réponses :
Il semble que this.roles est probablement le tableau d'éléments que vous enregistrez, n'est-ce pas? , vous essayez de définir une propriété id du tableau, et non d'ajouter un nouvel élément au tableau avec ces propriétés.
Essayez ceci
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);
C'est ma meilleure estimation. Cependant, vous devriez vraiment télécharger plus d'informations sur le problème:
Je l'ai essayé tout à l'heure, et j'obtiens TypeError: Impossible de lire la propriété 'push' d'une erreur indéfinie.
@Jonjie: Votre exemple de code semble incomplet. À quoi fait référence ceci ?
this.roles n'est pas disponible. Puisqu'il n'est pas dans un objet , this renverra l'objet window , et il n'y a pas d'attribut roles dans il.
@Refilon: Il y en aura si roles est une variable globale.
@FelixKling mais dans l'exemple ce n'est pas le cas.
@FelixKling Je pense que je n'accède pas à la variable role . Ce n'est pas accessible je pense
@Refilon: Sur la base du message d'erreur, je suis d'accord avec vous. Je suppose que le contexte n'a même pas d'importance, ils devraient simplement utiliser des rôles pour référencer directement la variable. Un exemple plus complet serait bien cependant.
Voici une solution,
J'ai créé votre exemple de tableau d'objets de rôle,
Création d'un nouvel objet à ajouter,
puis ajouté le nouvel objet au tableau.
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);
Vous essayez directement d'ajouter un objet au tableau,
Vous pouvez également le faire si vous spécifiez l'index
Ceci est un tableau d'éléments json. Vous devez d'abord créer un élément, puis le pousser dans le tableau de rôles comme celui-ci.
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)
"Ceci est un tableau d'éléments json." C'est un tableau d'objets. Il n'y a pas de JSON ici. JSON est un format d'échange de données textuelles.
this.roles n'est pas disponible. Puisqu'il n'est pas dans un objet , cela retournera l'objet window , et il n'y a pas d'attribut roles dedans.
Vous avez une erreur non définie depuis que vous utilisez "this" qui fait référence à la fenêtre et non à l'objet.
Vous pouvez l'ajouter manuellement car vous avez déjà les réponses ou vous pouvez utiliser Class à la place, ce qui à mon avis fonctionnera beaucoup mieux, je ne pense pas que l'utilisation de tous ces codes de copie soit bonne, c'est ma 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);
Que fais-tu? quelle erreur obtenez-vous? veuillez ajouter votre code.
Salut @NinaScholz s'il vous plaît voir ma mise à jour.
Ce que vous avez est un tableau d'objets. JSON est un format d'échange de données comme YAML ou CSV. Vous voudrez peut-être lire sur les tableaux sur MDN .
Pourquoi utilisez-vous
this.rolesau lieu derôles?@FelixKling désolé, j'ai oublié de mentionner qu'il se trouve à l'intérieur de l'objet
data {}. J'utilise vuejs ici. Veuillez consulter ma mise à jour.