Tambahkan atribut (elemen) baru ke objek JSON menggunakan JavaScript

439

Bagaimana cara menambahkan atribut (elemen) baru ke objek JSON menggunakan JavaScript?

kebiruan
sumber

Jawaban:

628

JSON adalah singkatan dari JavaScript Object Notation. Objek JSON sebenarnya adalah string yang belum diubah menjadi objek yang diwakilinya.

Untuk menambahkan properti ke objek yang ada di JS Anda bisa melakukan hal berikut.

object["property"] = value;

atau

object.property = value;

Jika Anda memberikan beberapa info tambahan seperti apa yang harus Anda lakukan dalam konteks, Anda mungkin mendapatkan jawaban yang lebih sesuai.

Quintin Robinson
sumber
6
@ Shanehoban di sini aadalah JSON, a.sseperti yang baru saja Anda tentukan adalah string. Sekarang Anda mencoba menambahkan["subproperty"] ke string. Apakah Anda mengerti sekarang mengapa Anda mendapat kesalahan?
shivam
1
Untuk pemula, ingat bahwa seperti kata Quintin, "objek" JSON bukanlah objek sama sekali, itu hanya string. Anda perlu mengonversinya menjadi objek Javascript aktual dengan JSON.parse () sebelum menggunakan contohnyaobject["property"] = value;
SpaceNinja
2
@shanehoban periksa jawaban saya di atas dan Anda akan melihat bagaimana Anda dapat menambahkan beberapa atribut sekaligus.
Victor Augusto
1
@EduardoLucio Itu karena Anda harus menggunakan JSON.stringify.
Solomon Ucko
1
@EduardoLucio Masalahnya console.logbukan untuk serialisasi. Gunakan 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);
Cody
sumber
6
Hanya apa yang saya cari, menambahkan elemen ketika nama harus dibangun secara terprogram
quilkin
4
contoh yang bagus. Ini membantu saya.
Ricky
152

Objek JSON hanyalah objek javascript, jadi dengan Javascript menjadi bahasa berbasis prototipe, yang harus Anda lakukan adalah mengatasinya menggunakan notasi titik.

mything.NewField = 'foo';
FlySwat
sumber
Itu dia, saya suka javascript protoype!
caglaror
70

terima kasih untuk posting ini. Saya ingin menambahkan sesuatu yang bisa bermanfaat.

Untuk IE, itu baik untuk digunakan

object["property"] = value;

sintaksis karena beberapa kata khusus di IE dapat memberi Anda kesalahan.

Sebuah contoh:

object.class = 'value';

ini gagal di IE, karena " kelas " adalah kata khusus. Saya menghabiskan beberapa jam dengan ini.

Leo
sumber
@Sunil Garg Bagaimana Anda menyimpan nilai itu sebagai anak kepada beberapa orang tua di objek asli?
Jamie Corkhill
42

Dengan ECMAScript sejak 2015 Anda dapat menggunakan Spread Syntax (... tiga titik):

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

Anda dapat menambahkan sub objek:

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

hasilnya adalah:

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

Anda juga dapat menggabungkan objek:

var mergedObj = { ...obj1, ...obj2 };
Cassio Seffrin
sumber
13

Anda juga dapat menggunakan Object.assigndari ECMAScript 2015. Ini juga memungkinkan Anda untuk menambahkan atribut bersarang sekaligus. Misalnya:

const myObject = {};

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

Ps: Ini tidak akan menimpa objek yang ada dengan atribut yang ditugaskan. Sebaliknya mereka akan ditambahkan. Namun jika Anda menetapkan nilai ke atribut yang ada maka itu akan diganti.

Victor Augusto
sumber
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;
}

Memperluas beberapa objek json (mengabaikan fungsi):

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

Akan menghasilkan objek json tunggal

Ivan
sumber
2

Anda juga dapat menambahkan objek json baru ke json Anda, menggunakan fungsi extended ,

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

Opsi yang sangat bagus untuk fungsi extended adalah penggabungan rekursif. Tambahkan saja nilai sebenarnya sebagai parameter pertama (baca dokumentasi untuk opsi lainnya). Contoh,

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}}
George Siggouroglou
sumber
2

Anda juga dapat secara dinamis menambahkan atribut dengan variabel secara langsung dalam objek literal.

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

Hasil dalam:

{
    amount: 1, 
    amount__more: 2
}
Stefan Rein
sumber
0

Penggunaan $.extend()dari jquery , seperti ini:

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

Saya harap Anda melayani mereka.

Giovanny Gonzalez
sumber