Dodaj nowy atrybut (element) do obiektu JSON za pomocą JavaScript

Jak dodać nowy atrybut (element) do obiektu JSON przy użyciu JavaScript?

JSON oznacza JavaScript Object Notation. Obiekt JSON jest tak naprawdę ciągiem, który nie został jeszcze przekształcony w obiekt, który reprezentuje.

Aby dodać właściwość do istniejącego obiektu w JS, możesz wykonać następujące czynności.

object["property"] = value;

lub

object.property = value;

Jeśli podasz dodatkowe informacje, takie jak dokładnie to, co musisz zrobić w kontekście, możesz uzyskać bardziej dopasowaną odpowiedź.

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);

Obiekt JSON jest po prostu obiektem javascript, więc skoro Javascript jest językiem opartym na prototypach, wystarczy adresować go za pomocą notacji kropkowej.

mything.NewField = 'foo';

dzięki za ten post. Chcę dodać coś, co może być przydatne.

W przypadku IE dobrze jest używać

object["property"] = value;

składnia, ponieważ niektóre słowa specjalne w IE mogą powodować błędy.

Przykład:

object.class = 'value';

to się nie udaje w IE, ponieważ „ klasa ” jest słowem specjalnym. Spędziłem z tym kilka godzin.

W ECMAScript od 2015 roku możesz używać składni spreadu (… trzy kropki):

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

Pozwala dodawać obiekty podrzędne:

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

wynik byłby:

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

Możesz także łączyć obiekty:

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

Możesz także użyć Object.assignz ECMAScript 2015. Pozwala także dodawać zagnieżdżone atrybuty jednocześnie. Na przykład:

const myObject = {};

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

Ps: Nie zastąpi to istniejącego obiektu z przypisanymi atrybutami. Zamiast tego zostaną dodane. Jeśli jednak przypisasz wartość do istniejącego atrybutu, zostanie on zastąpiony.

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;
}

Rozszerza wiele obiektów json (ignoruje funkcje):

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

Wynikiem będzie pojedynczy obiekt Json

Możesz także dodawać nowe obiekty json do swojego jsona, używając funkcji rozszerzenia ,

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

Bardzo dobrą opcją dla funkcji rozszerzenia jest scalanie rekurencyjne. Po prostu dodaj prawdziwą wartość jako pierwszy parametr (więcej informacji znajdziesz w dokumentacji). Przykład,

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}}

Możesz także dynamicznie dodawać atrybuty ze zmiennymi bezpośrednio w dosłowności obiektu.

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

Prowadzi do:

{
    amount: 1, 
    amount__more: 2
}

Korzysta $.extend()z jQuery , na przykład:

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

Mam nadzieję, że im służycie.