Додайте новий атрибут (елемент) до об'єкта JSON за допомогою JavaScript


Відповіді:


628

JSON означає JavaScript Object Notation. Об'єкт JSON - це дійсно рядок, який ще повинен бути перетворений на об'єкт, який він представляє.

Щоб додати властивість до існуючого об’єкту в JS, ви можете зробити наступне.

object["property"] = value;

або

object.property = value;

Якщо ви надасте додаткову інформацію, як-от саме те, що вам потрібно зробити в контексті, ви можете отримати більш детальну відповідь.


6
@shanehoban тут aJSON, a.sяк щойно визначене вами - це рядок. Тепер ви намагаєтеся додати ["subproperty"]рядок. Ви тепер розумієте, чому ви отримали помилку?
shivam

1
Для початківців пам’ятайте, що, як каже Квінтін, JSON «об’єкт» зовсім не є об’єктом, це лише рядок. Вам потрібно буде перетворити його на власне об’єкт Javascript з JSON.parse (), перш ніж використовувати його приклад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!
caglaror

70

дякую за цю публікацію Хочу додати щось, що може бути корисним.

Для IE це добре використовувати

object["property"] = value;

синтаксис, оскільки деякі спеціальні слова в IE можуть дати вам помилку.

Приклад:

object.class = 'value';

це не в IE, тому що " клас " - це особливе слово. Я провів кілька годин з цим.


@Sunil Garg Як би ви зберігали це значення в якості дитини для якогось батька в оригінальному об'єкті?
Джеймі Коркхілл

42

З ECMAScript з 2015 року ви можете використовувати синтаксис Spread (… три крапки):

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!'
    }
});

Пс: Це не замінить існуючий об’єкт із призначеними атрибутами. Замість цього вони будуть додані. Однак якщо ви присвоїте значення існуючому атрибуту, воно буде переосмислене.


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

Ви також можете додати нові об'єкти 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); 

Я сподіваюся, що ви їм служите.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.