JavaScriptを使用してJSONオブジェクトに新しい属性(要素)を追加する


439

JavaScriptを使用してJSONオブジェクトに新しい属性(要素)を追加するにはどうすればよいですか?

回答:


628

JSONはJavaScript Object Notationの略です。JSONオブジェクトは実際には、それが表すオブジェクトにまだ変換されていない文字列です。

JSの既存のオブジェクトにプロパティを追加するには、次のようにします。

object["property"] = value;

または

object.property = value;

コンテキスト内で正確に行う必要があるような追加情報を提供すると、より適切な回答が得られる場合があります。


6
ここaで@shanehoban はJSON a.sです。あなたが定義したのは文字列だけです。今、あなたは["subproperty"]文字列に追加しようとしています。なぜエラーが発生したのか理解しましたか?
shivam 14

1
初心者にとって、Quintinが言うように、JSON "オブジェクト"はオブジェクトではなく、単なる文字列であることを覚えておいてください。彼の例を使用する前に、JSON.parse()で実際のJavascriptオブジェクトに変換する必要がありますobject["property"] = value;
SpaceNinja

2
@shanehobanの上部にある私の答えを確認すると、一度に複数の属性を追加する方法がわかります。
ビクターアウグスト

1
@EduardoLucioこれは、を使用する必要があるためですJSON.stringify
ソロモンウッコ

1
@EduardoLucio問題は、console.logシリアル化を目的としていないことです。を使用しconsole.log(JSON. stringify(object))ます。
ソロモンウッコ

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
名前をプログラムで作成する必要がある場合に要素を追加して、私が探していたものをそのまま追加します
quilkin

4
素晴らしい例。これは私に役立ちます。
リッキー

152

JSONオブジェクトは単なるJavaScriptオブジェクトであるため、Javascriptはプロトタイプベースの言語であり、ドット表記を使用してアドレス指定するだけで済みます。

mything.NewField = 'foo';

つまり、私はjavascript protoypeが大好きです!
カグララー

70

この投稿をありがとう。役立つものを追加したい。

IEの場合、使用するとよい

object["property"] = value;

IEのいくつかの特殊な単語がエラーを引き起こす可能性があるため、構文。

例:

object.class = 'value';

これはIEでは失敗します。「クラス」は特別な単語だからです。これで数時間過ごしました。


@Sunil Garg元のオブジェクトの親に子としてその値をどのように保存しますか?
Jamie Corkhill、2018

42

2015年以降のECMAScriptでは、Spread Syntax(…3つのドット)を使用できます。

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

サブオブジェクトを追加することができます:

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

結果は次のようになります。

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

オブジェクトをマージすることもできます:

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

13

Object.assignからも使用できますECMAScript 2015。また、ネストされた属性を一度に追加することもできます。例えば:

const myObject = {};

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

Ps:これは、割り当てられた属性で既存のオブジェクトを上書きしません。代わりに追加されます。ただし、既存の属性に値を割り当てると、その値は上書きされます。


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

複数のjsonオブジェクトを拡張します(関数を無視します):

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

単一のjsonオブジェクトになります


2

また、extend関数を使用して、jsonに新しいjsonオブジェクトを追加することもできます。

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

拡張機能の非常に優れたオプションは、再帰的マージです。最初のパラメーターとして真の値を追加するだけです(その他のオプションについては、ドキュメントを参照してください)。例、

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

オブジェクトリテラルに直接、変数を含む属性を動的に追加することもできます。

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

結果:

{
    amount: 1, 
    amount__more: 2
}

0

用途$.extend()jqueryのこのような、:

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

どうぞよろしくお願いいたします。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.