Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to modify an array value of a JSON object in JavaScript?
In JavaScript, JSON objects are regular JavaScript objects that can contain arrays. Modifying array values within these objects is straightforward using array indexing or array methods.
When working with JSON objects containing arrays, you can access and modify array elements just like you would with any JavaScript array, using bracket notation or array methods.
Syntax
To modify an array value in a JSON object:
// Direct index assignment jsonObject.arrayProperty[index] = newValue; // Using array methods jsonObject.arrayProperty.push(newValue); jsonObject.arrayProperty.splice(index, 1, newValue);
Method 1: Direct Index Assignment
The simplest way to modify an array element is by directly assigning a new value using the array index.
<!DOCTYPE html>
<html>
<body>
<div id="output"></div>
<script>
let obj = {
firstName: "Alice",
lastName: "Cullen",
companies: ["Tesla", "Spacex", "Neuralink"]
};
let output = document.getElementById("output");
output.innerHTML = "Before: " + obj.companies.join(", ") + "<br>";
// Modify first element
obj.companies[0] = "SolarCity";
output.innerHTML += "After: " + obj.companies.join(", ");
</script>
</body>
</html>
Before: Tesla, Spacex, Neuralink After: SolarCity, Spacex, Neuralink
Method 2: Using Array Methods
You can also use array methods like splice() to replace elements or push() to add new ones.
<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
<script>
let person = {
name: "Elon Musk",
age: 52,
companies: ["Tesla", "Spacex", "Neuralink"]
};
let result = document.getElementById("result");
result.innerHTML = "Original: " + person.companies.join(", ") + "<br>";
// Replace element using splice
person.companies.splice(1, 1, "The Boring Company");
result.innerHTML += "After splice: " + person.companies.join(", ") + "<br>";
// Add new element
person.companies.push("xAI");
result.innerHTML += "After push: " + person.companies.join(", ");
</script>
</body>
</html>
Original: Tesla, Spacex, Neuralink After splice: Tesla, The Boring Company, Neuralink After push: Tesla, The Boring Company, Neuralink, xAI
Method 3: Modifying Multiple Elements
You can modify multiple array elements using loops or array methods like map().
<!DOCTYPE html>
<html>
<body>
<div id="display"></div>
<script>
let data = {
scores: [85, 90, 78, 92, 88]
};
let display = document.getElementById("display");
display.innerHTML = "Original scores: " + data.scores.join(", ") + "<br>";
// Add 5 points to each score
for (let i = 0; i < data.scores.length; i++) {
data.scores[i] += 5;
}
display.innerHTML += "Modified scores: " + data.scores.join(", ");
</script>
</body>
</html>
Original scores: 85, 90, 78, 92, 88 Modified scores: 90, 95, 83, 97, 93
Comparison of Methods
| Method | Use Case | Mutates Original |
|---|---|---|
| Direct Assignment | Replace single element | Yes |
| splice() | Replace/remove elements | Yes |
| push() | Add elements to end | Yes |
| map() | Transform all elements | No - returns new array |
Key Points
- JSON objects in JavaScript are regular objects - no special handling needed
- Use bracket notation for direct element modification
- Array methods provide more flexibility for complex modifications
- Always ensure the index exists before modifying to avoid undefined behavior
Conclusion
Modifying array values in JSON objects is straightforward using direct assignment or array methods. Choose the method based on whether you need to replace single elements, multiple elements, or add new ones to the array.
8K+ Views
