Aggiungi nuovo attributo (elemento) all'oggetto JSON usando JavaScript


439

Come faccio ad aggiungere un nuovo attributo (elemento) all'oggetto JSON usando JavaScript?

Risposte:


628

JSON è l'acronimo di JavaScript Object Notation. Un oggetto JSON è in realtà una stringa che deve ancora essere trasformata nell'oggetto che rappresenta.

Per aggiungere una proprietà a un oggetto esistente in JS è possibile effettuare le seguenti operazioni.

object["property"] = value;

o

object.property = value;

Se fornisci alcune informazioni extra come esattamente ciò che devi fare nel contesto, potresti ottenere una risposta più personalizzata.


6
@shanehoban qui aè JSON, a.scome appena definito da te è una stringa. Ora stai provando ad aggiungere ["subproperty"]a una stringa. Capisci ora perché hai ricevuto l'errore?
shivam,

1
Per i principianti, ricorda che come dice Quintin, un "oggetto" JSON non è affatto un oggetto, è solo una stringa. Dovresti convertirlo in un vero oggetto Javascript con JSON.parse () prima di usare il suo esempio diobject["property"] = value;
SpaceNinja,

2
@shanehoban controlla la mia risposta in alto e vedrai come puoi aggiungere più attributi contemporaneamente.
Victor Augusto,

1
@EduardoLucio Questo perché dovresti usare JSON.stringify.
Solomon Ucko

1
@EduardoLucio Il problema è che console.lognon è previsto per la serializzazione. Usa console.log(JSON. stringify(object)).
Solomon Ucko

182
var jsonObj = {
    members: 
           {
            host: "hostName",
            viewers: 
            {
                user1: "value1",
                user2: "value2",
                user3: "value3"
            }
        }
}

var i;

for(i=4; i<=8; i++){
    var newUser = "user" + i;
    var newValue = "value" + i;
    jsonObj.members.viewers[newUser] = newValue ;

}

console.log(jsonObj);

6
Proprio quello che stavo cercando, aggiungendo un elemento quando il nome deve essere costruito programmaticamente
quilkin,

4
ottimo esempio. Questo mi aiuta.
Ricky,

152

Un oggetto JSON è semplicemente un oggetto javascript, quindi con Javascript come linguaggio basato su prototipo, tutto ciò che devi fare è affrontarlo usando la notazione punto.

mything.NewField = 'foo';

Ecco, adoro il prototipo di JavaScript!
caglaror,

70

grazie per questo post. Voglio aggiungere qualcosa che possa essere utile.

Per IE, è buono da usare

object["property"] = value;

sintassi perché alcune parole speciali in IE possono darti un errore.

Un esempio:

object.class = 'value';

questo fallisce in IE, perché " class " è una parola speciale. Ho trascorso diverse ore con questo.


@Sunil Garg Come vorresti memorizzare quel valore come figlio in un genitore nell'oggetto originale?
Jamie Corkhill,

42

Con ECMAScript dal 2015 è possibile utilizzare la sintassi diffusa (... tre punti):

let  people = { id: 4 ,firstName: 'John'};
people = { ...people, secondName: 'Fogerty'};

Ti consente di aggiungere oggetti secondari:

people = { ...people, city: { state: 'California' }};

il risultato sarebbe:

{  
   "id": 4,
   "firstName": "John",
   "secondName": "Forget",
   "city": {  
      "state": "California"
   }
}

Puoi anche unire oggetti:

var mergedObj = { ...obj1, ...obj2 };

13

Puoi anche usare Object.assignda ECMAScript 2015. Inoltre, consente di aggiungere contemporaneamente attributi nidificati. Per esempio:

const myObject = {};

Object.assign(myObject, {
    firstNewAttribute: {
        nestedAttribute: 'woohoo!'
    }
});

Ps: Questo non sovrascriverà l'oggetto esistente con gli attributi assegnati. Invece verranno aggiunti. Tuttavia, se si assegna un valore a un attributo esistente, questo verrà sovrascritto.


7
extend: function(){
    if(arguments.length === 0){ return; }
    var x = arguments.length === 1 ? this : arguments[0];
    var y;

    for(var i = 1, len = arguments.length; i < len; i++) {
        y = arguments[i];
        for(var key in y){
            if(!(y[key] instanceof Function)){
                x[key] = y[key];
            }
        }           
    };

    return x;
}

Estende più oggetti json (ignora le funzioni):

extend({obj: 'hej'}, {obj2: 'helo'}, {obj3: {objinside: 'yes'}});

Si tradurrà in un singolo oggetto json


2

Puoi anche aggiungere nuovi oggetti json nel tuo json, usando la funzione di estensione ,

var newJson = $.extend({}, {my:"json"}, {other:"json"});
// result -> {my: "json", other: "json"}

Un'ottima opzione per la funzione di estensione è l'unione ricorsiva. Aggiungi il vero valore come primo parametro (leggi la documentazione per ulteriori opzioni). Esempio,

var newJson = $.extend(true, {}, {
    my:"json",
    nestedJson: {a1:1, a2:2}
}, {
    other:"json",
    nestedJson: {b1:1, b2:2}
});
// result -> {my: "json", other: "json", nestedJson: {a1:1, a2:2, b1:1, b2:2}}

2

È inoltre possibile aggiungere dinamicamente attributi con variabili direttamente in un oggetto letterale.

const amountAttribute = 'amount';
const foo = {
                [amountAttribute]: 1
            };
foo[amountAttribute + "__more"] = 2;

Risultati in:

{
    amount: 1, 
    amount__more: 2
}

0

Usi $.extend()di jquery , in questo modo:

token = {_token:window.Laravel.csrfToken};
data = {v1:'asdass',v2:'sdfsdf'}
dat = $.extend(token,data); 

Spero che tu li serva.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.