Update values in a JSON object

Question

Update values in a JSON object

Here is a JSON data structure that I am working with:

var jsonData = [
    {
        "id": "1",
        "key1": "Name1",
        "key2": 2,
        "key3": 1
    },
    {
        "id": "2",
        "key1": "Name2",
        "key2": 2,
        "key3": 1
    }, 
    {
        "id": "3",
        "key1": "Name3",
        "key2": 2,
        "key3": 1
    }
]

I have a requirement to replace one object with another within this array. For example, I need to update:

{
    "id": "2",
    "key1": "Name2",
    "key2": 2,
    "key3": 1
}

with

{
    "id": "5",
    "key1": "Name7",
    "key2": 3,
    "key3": 2
}

At the moment, I am able to filter out the specific object from the array:

var idToReplace = 2;
var newObj = {"id": "5", "key1": "Name7", "key2": 3, "key3": 2};
var filteredData = jsonData.filter(function(element) {
     return element.id === idToReplace;
});
console.log(filteredData);

What steps should be taken next in order to replace an object with id === 2 with the newObj?

javascript json

Answer 1

Answer №1

If you're looking for a way to find the index of an element in an array, you can utilize the method Array.prototype.findIndex():

var id = "2"; // ids are strings in your json object
var newObj = {"id": "5", "key1": "Name7", "key2": 3, "key3": 2};
var idx = json.findIndex(function(el) {
    return el.id === id;
});
if (~idx) { // this checks if idx is greater than -1
    json[idx] = newObj;
}

Keep in mind that findIndex may not be supported in all browsers, so it's a good idea to verify compatibility on MDN.

An alternative approach for better cross-browser support is replacing findIndex with reduce:

var idx = json.reduce(function(r, el, i) {
    return !~r && el.id === id ? i : r;
}, -1);

Answer 2

If you're looking for a way to find the index of an element in an array, you can utilize the method Array.prototype.findIndex():

var id = "2"; // ids are strings in your json object
var newObj = {"id": "5", "key1": "Name7", "key2": 3, "key3": 2};
var idx = json.findIndex(function(el) {
    return el.id === id;
});
if (~idx) { // this checks if idx is greater than -1
    json[idx] = newObj;
}

Keep in mind that findIndex may not be supported in all browsers, so it's a good idea to verify compatibility on MDN.

An alternative approach for better cross-browser support is replacing findIndex with reduce:

var idx = json.reduce(function(r, el, i) {
    return !~r && el.id === id ? i : r;
}, -1);

Answer 3

Answer №2

In JavaScript, the === operator signifies "equality without type coercion", allowing you to compare values regardless of their data types.

const id = 2; // id is a number, but json[i].id may be a string
const newObj = {"id": "5", "key1": "Name7", "key2": 3, "key3": 2};
const filteredResults = json.filter(function(element) {
     return element.id === String(id); // Alternatively, use id.toString() or id + ''
});
console.log(filteredResults);

Answer 4

In JavaScript, the === operator signifies "equality without type coercion", allowing you to compare values regardless of their data types.

const id = 2; // id is a number, but json[i].id may be a string
const newObj = {"id": "5", "key1": "Name7", "key2": 3, "key3": 2};
const filteredResults = json.filter(function(element) {
     return element.id === String(id); // Alternatively, use id.toString() or id + ''
});
console.log(filteredResults);

Update values in a JSON object

Answer №1

Answer №2

Similar questions

What is the best way to display a single object from an array once data is retrieved from an API

Javascript code for populating multiple objects with new items using a nested for loop

Importing a third-party JavaScript library in Angular 2 RC5: Utilizing Showdown Library

Using Function Call to Generate Components in React

The function str.split() is dividing the text based on individual letters rather than the specified delimiter

Shifting HTML table in Javascript by toggling checkboxes

Embedding a thread in an HTML document (Difficult task)

Insert this HTML table along with radio buttons into an Excel spreadsheet

I need help with this Jquery code - trying to target an element with a specific attribute value. What am I missing here?

Create a timestamp with Javascript rendering

Angular-powered SPAs with cookie authentication

When pressing the "back" button in the browser, the page displays JSON data instead of HTML, which is achieved by utilizing Rails and d3.js programming

Customized Wordpress Plugins

React-Native Error: Invalid element type detected

What methods do current web browsers utilize to implement the JS Array, particularly when it comes to adding

Comparison between WAMP and Live server integration with Facebook for connecting applications

The requested resource at http://127.0.0.1:8000/storage/profiles/ could not be located (Error 404: Not

The function .play() cannot be executed on document.getElementById(...) - it is not a

Ways to remove an item from firebase database

Should I wait for my state to be updated with new information before triggering the render function?