Обновление объекта JSON с помощью JavaScript

Вам просто нужно пройтись по списку и проверить свойства каждого объекта. Вот пример кода на JavaScript, который делает это:

for (var i = 0; i < jsonObj.length; ++i) {
    if (jsonObj[i]['Id'] === '3') {
        jsonObj[i]['Username'] = 'Thomas';
    }
}

Здесь мы используем цикл for, чтобы итерироваться по каждому элементу массива jsonObj. Если свойство Id объекта равно '3', то мы обновляем свойство Username этого объекта на 'Thomas'. Таким образом, можно легко вносить изменения в массив объектов.

Ваш код, написанный на jQuery, выполняет несколько ключевых действий. Давайте разберём его по шагам.

1. Когда документ полностью загружен ($(document).ready(...)), создаётся массив объектов jsonObj, в котором содержится информация о пользователях: их идентификаторы, имена и фамилии.

2. Затем с помощью функции $.each() вы перебираете каждый элемент массива. Внутри этой функции вы проверяете, если Id равен 3.

3. Если условие выполняется (v.Id == 3), вы меняете значение свойства Username на "Thomas" и используете return false, чтобы прервать цикл.

4. В конце работы скрипта выводится сообщение с новым именем пользователя (в данном случае для третьего объекта в массиве) при помощи alert().

Если вы хотите использовать более подходящий способ для изменения Username в объекте с Id равным 3, следует помнить, что индексы массивов начинаются с 0. Таким образом, объект с Id равным 3 на самом деле находится по индексу 2 в массиве. Обратите внимание на это, чтобы избежать путаницы в будущем.

Вот небольшая переработка вашего кода с учётом комментариев:

$(document).ready(function() {        
    var jsonObj = [
        {'Id': '1', 'Username': 'Ray', 'FatherName': 'Thompson'},  
        {'Id': '2', 'Username': 'Steve', 'FatherName': 'Johnson'},
        {'Id': '3', 'Username': 'Albert', 'FatherName': 'Einstein'}
    ];

    // Поиск и изменение Username для пользователя с Id=3
    $.each(jsonObj, function(i, v) {       
        if (v.Id == '3') { // Обратите внимание: Id - строка
            v.Username = "Thomas";
            return false; // Прерываем цикл
        }
    });

    alert("New Username: " + jsonObj[2].Username); // Вывод нового Username
});

Убедитесь, что вы работаете с типами данных (строки и числа) правильно, чтобы избежать неожиданных ошибок.

Для разбора JSON-строки в объект JavaScript можно использовать следующий код:

var parsedobj = jQuery.parseJSON(jsonObj);

Это будет полезно, если вам не требуется, чтобы формат оставался строковым. В противном случае вам придется преобразовать этот объект обратно в JSON с помощью стандартной библиотеки JSON, используя метод JSON.stringify.

Ваш код, выполняющий изменение значения свойства Username для объекта с Id равным 3, выглядит вполне исправным. Однако, если массив всегда упорядочен по идентификаторам, то можно упростить код следующим образом:

jsonObj[2].Username = 'Thomas';

Если массив не гарантированно отсортирован, то ваш изначальный подход с циклом будет более безопасным:

var i = jsonObj.length;
while (i-- > 0) {
    if (jsonObj[i].Id === 3) {
        jsonObj[i].Username = 'Thomas';
        break;
    }
}

Этот код перебирает массив в обратном порядке, и при нахождении объекта с Id, равным 3, изменяет значение Username. Такие конструкции полезны, если мы не уверены в порядке элементов массива. Однако, если порядок известен и гарантирован, использование индекса сразу, как показано выше, сделает код более понятным и компактным.

Когда вы добавляете товары в корзину, вы можете использовать следующий код, который демонстрирует, как добавлять элементы в массив и сохранять его в локальном хранилище. Вот пример, как реализовать функциональность корзины:

var productArray = [];

$(document).on('click', '[cartBtn]', function(e) {
    e.preventDefault();
    $(this).html('<i class="fa fa-check"></i>Добавлено в корзину');
    console.log('Товар добавлен');
    var productJSON = {
        "id": $(this).attr('pr_id'),
        "nameEn": $(this).attr('pr_name_en'),
        "price": $(this).attr('pr_price'),
        "image": $(this).attr('pr_image'),
        "quantity": 1,
        "discount": 0,
        "total": $(this).attr('pr_price')
    };

    if (localStorage.getObj('product') !== null) {
        productArray = localStorage.getObj('product');
        productArray.push(productJSON);
        localStorage.setObj('product', productArray);
    } else {
        productArray.push(productJSON);
        localStorage.setObj('product', productArray);
    }

    itemCountInCart(productArray.length);
});

После добавления товаров в корзину вы получите JSON-массив, который будет выглядеть так:

[
    {
        "id": "95",
        "nameEn": "Новый браслет",
        "price": "8776",
        "image": "1462012394815.jpeg",
        "quantity": 1,
        "discount": 0,
        "total": "8776"
    },
    {
        "id": "96",
        "nameEn": "новый браслет",
        "price": "76",
        "image": "1462012431497.jpeg",
        "quantity": 1,
        "discount": 0,
        "total": "76"
    },
    {
        "id": "97",
        "nameEn": "khjk",
        "price": "87",
        "image": "1462012483421.jpeg",
        "quantity": 1,
        "discount": 0,
        "total": "87"
    }
]

Чтобы удалить товар из корзины, можно использовать следующий код:

$(document).on('click', '[itemRemoveBtn]', function() {
    var arrayFromLocal = localStorage.getObj('product');
    findAndRemove(arrayFromLocal, "id", $(this).attr('basketproductid'));
    localStorage.setObj('product', arrayFromLocal);
    loadBasketFromLocalStorageAndRender();
});

// Эта функция удаляет элемент по указанному свойству, в данном случае по ID.
function findAndRemove(array, property, value) {
    array.forEach(function(result, index) {
        if (result[property] === value) {
            // Удаление из массива
            console.log('Удалено по индексу ' + index + ' результат ' + JSON.stringify(result));
            array.splice(index, 1);
        }
    });
}

И наконец, чтобы обновить объект JSON с помощью JavaScript, например, чтобы изменить количество товара и общую стоимость при изменении значения поля "число", вы можете использовать следующий код:

$(document).on('keyup mouseup', 'input[type=number]', function() {
    var arrayFromLocal = localStorage.getObj('product');
    setQuantityAndTotalPrice(arrayFromLocal, $(this).attr('updateItemid'), $(this).val());
    localStorage.setObj('product', arrayFromLocal);
    loadBasketFromLocalStorageAndRender();
});

function setQuantityAndTotalPrice(array, id, quantity) {
    array.forEach(function(result) {
        if (result.id === id) {
            result.quantity = quantity;
            result.total = (quantity * result.price);
        }
    });
}

Этот код позволяет вам обновить количество продукта и вычислить новую общую стоимость при изменении значения в поле ввода. Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать!