เพิ่มคุณสมบัติใหม่ (องค์ประกอบ) ไปยังวัตถุ JSON โดยใช้ JavaScript

ฉันจะเพิ่มคุณสมบัติใหม่ (องค์ประกอบ) ไปยังวัตถุ JSON โดยใช้ JavaScript ได้อย่างไร

JSON ย่อมาจาก JavaScript Object Notation วัตถุ JSON เป็นสตริงที่ยังไม่ได้เปลี่ยนเป็นวัตถุที่แสดงถึง

ในการเพิ่มคุณสมบัติให้กับวัตถุที่มีอยู่ใน JS คุณสามารถทำสิ่งต่อไปนี้

object["property"] = value;

หรือ

object.property = value;

หากคุณให้ข้อมูลเพิ่มเติมเช่นเดียวกับสิ่งที่คุณต้องทำในบริบทคุณอาจได้รับคำตอบที่เหมาะสมยิ่งขึ้น

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

วัตถุ JSON เป็นเพียงวัตถุจาวาสคริปต์ดังนั้นด้วย Javascript เป็นภาษาที่ใช้ต้นแบบสิ่งที่คุณต้องทำคือที่อยู่มันโดยใช้เครื่องหมายจุด

mything.NewField = 'foo';

ขอบคุณสำหรับโพสต์นี้ ฉันต้องการเพิ่มสิ่งที่มีประโยชน์

สำหรับ IE มันใช้งานได้ดี

object["property"] = value;

ไวยากรณ์เนื่องจากคำพิเศษใน IE สามารถให้ข้อผิดพลาดแก่คุณได้

ตัวอย่าง:

object.class = 'value';

สิ่งนี้ล้มเหลวใน IE เนื่องจาก " class " เป็นคำพิเศษ ฉันใช้เวลาหลายชั่วโมงกับสิ่งนี้

ด้วย ECMAScript ตั้งแต่ปี 2558 คุณสามารถใช้ Spread Syntax (... สามจุด):

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

นอกจากนี้คุณยังสามารถใช้จากObject.assign ECMAScript 2015นอกจากนี้ยังช่วยให้คุณสามารถเพิ่มแอตทริบิวต์ที่ซ้อนกันในครั้งเดียว เช่น:

const myObject = {};

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

Ps: สิ่งนี้จะไม่แทนที่วัตถุที่มีอยู่ด้วยคุณสมบัติที่กำหนด พวกเขาจะถูกเพิ่มเข้ามาแทน อย่างไรก็ตามหากคุณกำหนดค่าให้กับแอตทริบิวต์ที่มีอยู่แล้วมันจะถูกแทนที่

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 เดียว

คุณยังสามารถเพิ่มวัตถุ 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}}

นอกจากนี้คุณยังสามารถเพิ่มแอททริบิวต์ที่มีตัวแปรได้โดยตรงในวัตถุตามตัวอักษร

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

ผลลัพธ์ใน:

{
    amount: 1, 
    amount__more: 2
}

การใช้ประโยชน์$.extend()ของjQueryเช่นนี้

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

ฉันหวังว่าคุณจะรับใช้พวกเขา