How to create an array of multiple objects with multiple nested key-value pairs in JavaScript?

JavaScript is a general-purpose language that is widely used to create dynamic web applications. One of the most commonly used data structures in JavaScript is arrays. An array is a collection of elements that can be of any type, including objects. In this article, we will discuss how to create an array of multiple objects with multiple nested key-value pairs in JavaScript.

What is an array?

An array is a special type of object used to store a collection of values. The values ​​can be of any data type, such as numbers, strings, Boolean values, or even other arrays. Arrays are a very powerful feature in JavaScript that can be used in many different types of applications.

grammar

let myArray = [20, 22, 24];
Or
const arr = [hello, ‘world’];

Create an array containing multiple objects

First, to create an array containing multiple objects in JavaScript, we have to define an empty array, for which we can use the [] notation. After defining the array, we can use the push() method to add one or more objects to the array. For example -

let arr = [];
arr.push({
  key1: value1,
  key2: value2
});
arr.push({
  key1: value3,
  key2: value4
});

In the given example, we are rejecting an array named "arr" which has two objects. We used the push() method to add each object to the end of the array. Here the array object is defined using curly braces {} with key-value pairs. Once we have created the array containing the objects, we can now use JavaScript methods or operations to access and manipulate the objects and their properties.

There are many ways to access the objects in the array. One way is to use the forEach method () to loop through the array and access each object and its properties separately, or we can also use methods such as map() or filter() for Convert or manipulate elements in an array.

Add nested key-value pairs to objects

After creating the array, we can now add nested key-value pairs to the object by defining an object within another object. For example -

let myObj = {
  key1: value1,
  key2: {
    nestedKey1: nestedValue1,
    nestedKey2: nestedValue2
  }
};

In the given example, we define myObj as an object with two key-value pairs. The value of the key2 pair is another object with two nested key-value pairs.

Create an array using objects with nested key-value pairs

To create an array of objects with nested key-value pairs, we can combine the techniques discussed above. For example -

let arr = [];
arr.push({
  key1: value1,
  key2: {
    nestedKey1: nestedValue1,
    nestedKey2: nestedValue2
  }
});
arr.push({
  key1: value3,
  key2: {
    nestedKey1: nestedValue3,
    nestedKey2: nestedValue4
  }
});

Above, we defined an empty array arr and added two objects to it using the push() method. Each object contains two key-value pairs. The value of key2 is another one with two nested key values. The right object.

Use nested key-value pairs to access data in object arrays

method 1

In this approach, we will use a combination of dot notation and bracket notation to access data in an array of objects with nested key-value pairs. Dot notation allows direct access to the properties of an object, whereas in square bracket notation we can access properties using variables.

As an example, we can use the following dot notation to access the name attribute of the first object in arr -

const objOne = arr[0];
const object = objOne.name;

Here, we assign the first object in arr to a variable named objOne. Now using dot notation, we can access any property of objOne and assign it to a variable named object.

In order to access the state attribute of the address attribute of the second object in arr, we can use the following bracket notation -

const objTwo = arr[1];
const address = objTwo["city"]["state"];

Here, we assign another object in arr to a variable named objTwo. Now using bracket notation, we can access the city property of objTwo and then assign the state property of the nested object to the address variable.

Method 2

Another way to access data in an array of objects with nested key-value pairs is to use the forEach() method. In this method, the array is iterated using the forEach() method, and for each object in the array, a for...in loop is used to extract the value of each key-value pair. These values ​​are then pushed into a new array.

Example 1

This example shows how to create an array containing multiple objects with nested key-value pairs.

We created an empty array named arr and added three objects to it using the push() method. Each object has a key-value pair: key1 has the value "value1", key2 has the value "value2", and so on. The Push() method adds an item to an array and takes one or more parameters representing the items to be added, and finally, the three objects are passed in as separate parameters.

<!DOCTYPE html>
<html>
   <body>
      <p id="array"></p>
      <script>
         let arr = [];
         arr.push({ key1: "value1" }, { key2: "value2" }, { key3: "value 3" });
         document.getElementById("array").innerHTML = JSON.stringify(arr);
      </script>
   </body>
</html>

Example 2

This example shows how to create two arrays containing multiple objects with nested key-value pairs and add them to a single array.

In the code below, we use a for...in loop to loop through each object in arr1 and arr2 to access the value associated with each key. We then use arr3.push(object[key]) to push only the value into the arr3 array.

<!DOCTYPE html>
<html>
   <body>
      <p id="array"></p>
      <script>
         const arr1 = [
            { key1: "value 1" },
            { key2: "value 2" },
            { key3: "value 3" },
         ];
         const arr2 = [
            { key4: "value 4" },
            { key5: "value 5" },
            { key6: "value 6" },
         ];
         const arr3 = [];
         arr1.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         arr2.forEach(function (object) {
            for (const key in object) {
               arr3.push(object[key]);
            }
         });
         document.getElementById("array").innerHTML = JSON.stringify(arr3);
      </script>
   </body>
</html>

结论

数组是 JavaScript 中的一种重要数据结构，可以存储任何数据类型（包括对象）的信息集合。创建具有多个嵌套键值对的多个对象的数组是一个简单的过程，为此，我们首先定义一个空数组并使用 push() 方法向其中添加对象，其中每个对象都使用 {} （花括号）定义)，包含使用逗号分隔的键值对。要访问和操作对象及其属性，我们可以使用 JavaScript 方法。

我们还可以通过在另一个对象中定义一个对象来向对象添加嵌套键值对。使用带有嵌套键值对的对象的方法可以在 JavaScript 中创建更强大、更灵活的数据结构。我们看到了不同的方法，包括点符号和括号符号的组合，或者使用 forEach() 方法和 for...in 循环来提取每个键值对的值，以访问嵌套对象数组中的数据键值对。

The above is the detailed content of How to create an array of multiple objects with multiple nested key-value pairs in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!