Добавить новый атрибут (элемент) в объект JSON, используя JavaScript

439

Как добавить новый атрибут (элемент) в объект JSON с помощью JavaScript?

голубоватый
источник

Ответы:

628

JSON означает JavaScript Object Notation. Объект JSON - это действительно строка, которую еще не удалось превратить в объект, который он представляет.

Чтобы добавить свойство к существующему объекту в JS, вы можете сделать следующее.

object["property"] = value;

или

object.property = value;

Если вы предоставите некоторую дополнительную информацию, например, что именно вам нужно сделать в контексте, вы можете получить более точный ответ.

Квинтин Робинсон
источник
6
@shanehoban здесь a- это JSON, так a.sкак только что вы определили это строка. Теперь вы пытаетесь добавить ["subproperty"]в строку. Теперь ты понимаешь, почему у тебя ошибка?
Шивам
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);
Cody
источник
6
Как раз то, что я искал, добавив элемент, когда имя должно быть сконструировано программно
quilkin
4
Отличный пример. Это помогает мне.
Рикки
152

Объект JSON - это просто объект javascript, поэтому, поскольку Javascript является языком, основанным на прототипах, все, что вам нужно сделать, это обратиться к нему с помощью точечной нотации.

mything.NewField = 'foo';
FlySwat
источник
Вот и все, я люблю javascript-прототип!
Caglaror
70

спасибо за этот пост. Я хочу добавить что-то, что может быть полезным.

Для IE это хорошо использовать

object["property"] = value;

синтаксис, потому что некоторые специальные слова в IE могут выдать ошибку.

Пример:

object.class = 'value';

в IE это не получается, потому что « класс » - это особое слово. Я провел несколько часов с этим.

Лео
источник
@Sunil Garg Как бы вы сохранили это значение в качестве дочернего для какого-либо родителя в исходном объекте?
Джейми Коркхилл
42

С ECMAScript с 2015 года вы можете использовать синтаксис распространения (… три точки):

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

Вы также можете добавить новые объекты 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); 

Я надеюсь, что вы служите им.

Джованни Гонсалес
источник