オブジェクトに要素を追加する


222

私はjsonファイルを入力する必要があります、今私はこのようなものを持っています:

{"element":{"id":10,"quantity":1}}

そして、別の「要素」を追加する必要があります。私の最初のステップは、を使用してそのjsonをObject型cart = JSON.parseに配置することです。次に、新しい要素を追加する必要があります。私cart.pushは別の要素を追加するために使用する必要があると思いました、私はこれを試しました:

var element = {};
element.push({ id: id, quantity: quantity });
cart.push(element);

しかしelement.push、しようとすると「オブジェクトにメソッドプッシュがありません」というエラーが表示され、「要素」をどこにも伝えていないため、何か間違っていると思います。

どうやってやるの?

編集:すみません、頭の中でたくさんの混乱がありました。

からデータJSON.parseを取得するときはオブジェクトタイプしか取得できないと思っていましたが、最初にJSONに入力したものを取得します。

オブジェクトの代わりに配列を配置することで問題が解決しました。ここでも多くの提案を使用しました。ありがとうございます。



Object.assign(target、source); すべてのプロパティをソースオブジェクトからターゲットオブジェクトにコピーするために使用できます。
David Spector

回答:


287

要素は配列ではありませんが、カートは多くの要素オブジェクトをサポートするために配列である必要があります。コード例:

var element = {}, cart = [];
element.id = id;
element.quantity = quantity;
cart.push(element);

カートをフォーム内のオブジェクトの配列にしたい場合は、以下{ element: { id: 10, quantity: 1} }を実行します。

var element = {}, cart = [];
element.id = id;
element.quantity = quantity;
cart.push({element: element});

JSON.stringify() コメントで懸念として言及されました:

>> JSON.stringify([{a: 1}, {a: 2}]) 
      "[{"a":1},{"a":2}]" 

2
ありがとう、しかし、私のカートは配列ではなく、cart.pushを実行できません:(この操作の後にJSON.stringify(cart)を使用するオブジェクトが必要です
HypeZ

@HypeZカートがオブジェクトの配列である場合でも、カートを文字列化できます。
Konstantin Dinev 2013年

ありがとうございました!しかし、私の基本データは、最初に「cart = JSON.parse(jsonfile)」のオブジェクトタイプの原因です。jsonをオブジェクトとして取得し、配列に変換し、要素を追加し、文字列化する必要があるとは思いません。
HypeZ 2013年

どういうわけか、私のオブジェクトは最後の要素だけで満たされます。たとえば、4つの異なるアイテムがありますが、オブジェクトでは4つの要素すべてが=最後の値のソリューションです。forの内部では、適切に機能します
Gorodeckij Dimitrij

1
@GorodeckijDimitrij同じ要素オブジェクトを再利用していて、そのキーに新しい値を再設定する場合は、要素の同じインスタンスを変更し、それを何度も配列にプッシュします。追加する要素ごとに新しい要素オブジェクトを使用するだけです。これは、forループのスコープで実行したことです。
コンスタンティンディネフ

160

その行で

var element = {};

elementプレーンオブジェクトであると定義します。ネイティブJavaScriptオブジェクトにはpush()メソッドがありません。プレーンオブジェクトに新しいアイテムを追加するには、次の構文を使用します。

element[ yourKey ] = yourValue;

一方、あなたはを使用elementして配列として定義することができます

var element = [];

次に、を使用して要素を追加できますpush()


4
element[ yourKey ] = yourValue;オブジェクトに要素を追加できる最良の方法です。
Pramesh Bajracharya

ただし、element [yourKey] = yourValue;を使用してオブジェクトに追加された要素の順序を許可することはできません。
RollerCosta 2018

2
@Pramesh Bajracharya要素に値を追加するのではなく、現在の要素をその値に設定するだけです。
Hasen

1
@sommesh複製をどのように保持しますか?することができますelement[ yourkey ] = [ element{yourkey], yourNewValue ];
シルコ

1
@sommeshこれは重複したキーを提供しますが、JSオブジェクトでは定義上これは不可能です。以前に示したように、1つのキーに対して複数の値しか収集できません。
シルコ

21

カートを配列ではなくオブジェクトとして保存する必要がある場合([]として保存することをお勧めします)、IDをキーとして使用するようにいつでも構造を変更できます。

var element = { quantity: quantity };
cart[id] = element;

これにより、次のように複数のアイテムをカートに追加できます。

cart["1"] = { quantity: 5};
cart["2"] = { quantity: 10};

// Cart is now:
// { "1": { quantity: 5 }, "2": { quantity: 10 } }

ありがとう、でもカートは配列ではなくオブジェクトである必要があります:(
HypeZ

3
このようなオブジェクトを使用する1つの理由は、アイテムを削除する必要がある場合です。オブジェクトからキーを削除する方が、配列からキーを削除するよりもはるかに簡単です。
bryc 2015

HypeZの配列コメントが誰かを捨てる場合、Craigの答えは配列を追加せず、角括弧[]を使用してプロパティにアクセスします。テストそれはここjsfiddleで、それについて読んで、ここではMozillaで、ここで素晴らしい記事だデジタルオーシャン私はずっと前に出会った望むことは。
Hastig Zusammenstellen 2018

12

オブジェクトに追加するには Object.assign

var ElementList ={}

function addElement (ElementList, element) {
    let newList = Object.assign(ElementList, element)
    return newList
}
console.log(ElementList)

出力:

{"要素":{"id":10、 "数量":1}、 "要素":{"id":11、 "数量":2}}


これはおそらく最も機能的な方法ですが、新しいJavaScript開発者はおそらくこれを理解していません。
codeninja

1
私はそれを試しましたが、両方が同じ名前を持っているので、それは既存の要素を上書きしますelement、それでそれは最後の要素だけを持ちます。
Haritsinh Gohil

6

あなたはvar element = [];
JavaScript {}で書く必要があります空のオブジェクトで[]あり、空の配列です。


6
cart.push({"element":{ id: id, quantity: quantity }});

4
カートはオブジェクトなので、cart.pushを実行できません!:(
HypeZ 2013年

それが配列ではなくオブジェクトである特定の理由?
Cris

「cart = JSON.parse(jsonfile)」から取得し、オブジェクトを提供するため
HypeZ

6

この試みに関連するものがあるとすれば、それを読んでいました。

1.オブジェクト内にプッシュ関数を定義します。

let obj={push:function push(element){ [].push.call(this,element)}};

これで、配列のように要素をプッシュできます

obj.push(1)
obj.push({a:1})
obj.push([1,2,3])

これはこのオブジェクトを生成します

obj={
 0: 1
 1: {a: 1}
 2: (3) [1, 2, 3]
 length: 3
}

要素がインデックスとともに追加され、オブジェクトに新しい長さプロパティが追加されていることにも注目してください。これは、オブジェクトの長さを見つけるのにも役立ちます。これは、 push()関数の機能します


5
function addValueInObject(object, key, value) {
    var res = {};
    var textObject = JSON.stringify(object);
    if (textObject === '{}') {
        res = JSON.parse('{"' + key + '":"' + value + '"}');
    } else {
        res = JSON.parse('{' + textObject.substring(1, textObject.length - 1) + ',"' + key + '":"' + value + '"}');
    }
    return res;
}

このコードは機能しています。


3

これを試して:

var data = [{field:"Data",type:"date"},  {field:"Numero",type:"number"}];

var columns = {};

var index = 0;

$.each(data, function() {

    columns[index] = {
        field : this.field,
        type : this.type
    };

    index++;
});

console.log(columns);

3

新しいキー/ペア要素を元のオブジェクトに追加します。

const obj = { a:1, b:2 }
const add = { c:3, d:4, e: ['x','y','z'] }

Object.entries(add).forEach(([key,value]) => {obj[key] = value })

obj新しい値:

{a: 1, b: 2, c: 3, d: 4, e: ["x", "y", "z"] }

2

誰かが同様のJSONを作成しようとしている場合、使用せずに cart配列として。

私はオブジェクトの配列を持っていますmyArr

var myArr = [{resourceType:"myRT",
            id: 1,
            value:"ha"},
            {resourceType:"myRT",
            id: 2,
            value:"he"},
            {resourceType:"myRT",
            id: 3,
            value:"Li"}];

そして、私は次の構造でJSONを作成しようとします:

{
 "1":{"resourceType":"myRT","id":"1","value":"ha"},
 "2":{"resourceType":"myRT","id":"2","value":"he"},
 "3":{"resourceType":"myRT","id":"3","value":"Li"}
}

あなたは単に行うことができます

var cart = {};
myArr.map(function(myObj){
                    cart[myObj.id]= myObj;
                    });

作成した新しいJSON構造に値をどのように追加しますか?
ジュードフェルナンデス

1
@JudeFernandesは、cart[key]=value基本的にその重要な値のマップです。回答が役に立った場合は賛成票を投じてください。ありがとう!
Saad Patel

2

まだ解決策を探している人にとっては、オブジェクトは次のような配列に格納されているはずだと思います...

var element = {}, cart = [];
element.id = id;
element.quantity = quantity;
cart.push(element);

次に、要素をオブジェクトとして使用する場合、これを行うことができます...

var element = cart.find(function (el) { return el.id === "id_that_we_want";});

"id_that_we_want"に変数を配置し、配列に必要な要素のIDを指定します。「elemnt」オブジェクトが返されます。もちろん、オブジェクトを見つけるためにidを使用する必要はありません。他のプロパティを使用して検索を行うことができます。


1
 function addValueInObject(value, object, key) {

        var addMoreOptions = eval('{"'  + key + '":' +  value + '}');

        if(addMoreOptions != null) {
            var textObject = JSON.stringify(object);
            textObject = textObject.substring(1,textObject.length-1);
            var AddElement = JSON.stringify(addMoreOptions);
            object = eval('{' + textObject +','+  AddElement.substring(1,AddElement.length-1) + '}');
        }
        return object;
    }

addValueInObject('sdfasfas', yourObject, 'keyname');

または:

var obj = {'key':'value'};

obj.key2 = 'value2';

これは同じ結果を得る方法ですが、このソリューションは適切ではありません。
warunapww 2015年

1

pushは配列のメソッドなので、オブジェクトの場合、最後の要素のインデックスを取得できます。おそらく、以下のようにオブジェクトのpushと同じジョブを実行できます

var lastIndex = Object.keys(element)[Object.keys(element).length-1];

次に、要素の新しいインデックスにオブジェクトを追加します

element[parseInt(lastIndex) +1] = { id: id, quantity: quantity };

1

JSでループを実行するように設計していない場合は、PHPに渡してループを実行してください。

let decision = {}
decision[code+'#'+row] = event.target.value

この概念は少し役立つかもしれません


1

これは古い質問ですが、とにかく今日のベストプラクティスはObject.definePropertyを使用することです。

const object1 = {};

Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
// throws an error in strict mode

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