How to modify an array value of a JSON object in JavaScript?

Javascript Object Oriented Programming Front End Technology

In this article, we are going to discuss how to modify an array value of a JSON object in JavaScript. We try to update a new value or modify the existing value in an array.

Modifying an array is just like modifying an object when that array is inside the object. The normal general principles of modifying will apply here.

Syntax

Following is the syntax of the for…in statement.

for (var in obj) {
   //code 
}

Example 1

In this example, we are trying to loop through an array using the for…in statement. This statement helps us to loop over the properties of an object. We can execute the code once for each property. Here, we are trying to modify the existing value and return the array.

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title> Modify an array value of a JSON Object </title>
   </head>
   <body>
      <script type="text/javascript">
         let res1 = "";
         let res2 = "";
         let obj = {
            firstName: "Alice",
            lastName: "Cullen",
            companies: ["Tesla", "Spacex", "Neuralink"],
         };
         for (let i in obj.companies) {
            res1 += obj.companies[i] + "</br>";
         }
         document.write("Before change: " + " " + res1);
         obj.companies[0] = "SolarCity";
         for (let i in obj.companies) {
            res2 += obj.companies[i] + "</br>";
         }
         document.write("After change:" + " " + res2);
      </script>
   </body>
</html>

Example 2

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8" />
      <meta http-equiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Modify an array value of a JSON Object</title>
      <div id="display"></div>
   </head>
   <body>
      <script type="text/javascript">
         let arr = new Array("Alice", 00, "Edward", 80);
         let res = "";
         arr[1] = 40;

         for (let i in arr) {
            res += arr[i] + "<br>";
         }

         document.getElementById("display").innerHTML = res;
      </script>
  </body>
</html>

Example 3

In the following example, Initially in the 'companies' array, the first element is 'Tesla'. But after modifying the first element is changed to 'SolarCity' and the result is displayed in the output.

<html>
<body>
   <script>
      var res1 = "";
      var res2 = "";
      var obj = {
         "name":"Elon musk",
         "age":48,
         "companies": [
            "Tesla", "Spacex", "Neuralink"
         ]
      }
      for (var i in obj.companies) {
         res1 += obj.companies[i] + "</br>"
      }
      document.write("Before change: " +" "+res1);
      obj.companies[0] = "SolarCity";
      for (var i in obj.companies) {
         res2 += obj.companies[i] + "</br>"
      }
      document.write("After change:" +" "+res2);
   </script>
</body>
</html>