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


Odpowiedzi:


628

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ź.


6
@shanehoban tutaj ajest JSON, a.sjak właśnie zdefiniowany przez Ciebie jest ciągiem. Teraz próbujesz dodać ["subproperty"]do ciągu. Czy rozumiesz teraz, dlaczego wystąpił błąd?
shivam

1
Dla początkujących pamiętaj, że jak mówi Quintin, „obiekt” JSON wcale nie jest obiektem, to tylko ciąg znaków. Trzeba będzie przekonwertować go do rzeczywistego obiektu JavaScript za pomocą JSON.parse () przed użyciem jego przykładuobject["property"] = value;
SpaceNinja

2
@shanehoban sprawdź moją odpowiedź u góry, a zobaczysz, jak możesz dodać wiele atrybutów jednocześnie.
Victor Augusto

1
@EduardoLucio To dlatego, że powinieneś używać JSON.stringify.
Solomon Ucko

1
@EduardoLucio Problem polega na tym, że console.lognie jest on przeznaczony do serializacji. Zastosowanie 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
Właśnie tego szukałem, dodając element, gdy nazwa musi być konstruowana programowo
quilkin

4
świetny przykład. Pomaga mi to.
Ricky

152

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

To jest to, kocham prototyp javascript!
caglaror

70

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.


@Sunil Garg Jak zachowałbyś tę wartość jako dziecko dla rodzica w oryginalnym obiekcie?
Jamie Corkhill,

42

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

13

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.


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

Rozszerza wiele obiektów json (ignoruje funkcje):

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

Wynikiem będzie pojedynczy obiekt Json


2

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

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
}

0

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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.