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

0 0 3 minutes read

In this article, we will learn to create an array with multiple objects having key-value pairs, we will use nesting which means defining another array in a pre-defined array with key-value pairs.

Suppose we have several arrays of objects means containing various key-value pairs where keys are uniquely identified now we have to add these arrays to another array called the base or parent array. Let’s do this with an example.

Example 1: Creating the array containing key-value pair objects.

Javascript

<script>
    const array1 = [ { key : 1 , value : "hello" } , 
                     { key : 2 , value : "Geek" } , 
                     { key : 3 , value : "zambiatek" } ,
                     { key : 4 , value :"JavaScript"} ,
                     { key : 5 , value : "Course" } ];
    console.log(array1);
</script>

Output:

[ { key: 1, value: 'hello' },
  { key: 2, value: 'Geek' },
  { key: 3, value: 'zambiatek' },
  { key: 4, value: 'JavaScript' },
  { key: 5, value: 'Course' } ]

Example 2: Creating the arrays of objects and adding them to another array.

Javascript

<script>
    const array1 = [ { key : 1 , value : "hello" } , 
                     { key : 2 , value : "Geek" } , 
                     { key : 3 , value : "zambiatek" } ,
                     { key : 4 , value :"JavaScript"} ,
                     { key : 5 , value : "Course" } ];
 
    const array2 = [ { key : 11 , value : "Courses" } ,
                     { key : 12 , value : "C++" } , 
                     { key : 13 , value : "JAVA" } ,
                     { key : 14 , value : "C" },
                     { key : 15 , value : "Many more" } ];
 
    const array = [ array1 , array2 ];
    console.log(array);
</script>

Output:

[ [ { key: 1, value: 'hello' },
    { key: 2, value: 'Geek' },
    { key: 3, value: 'zambiatek' },
    { key: 4, value: 'JavaScript' },
    { key: 5, value: 'Course' } ],
  [ { key: 11, value: 'Courses' },
    { key: 12, value: 'C++' },
    { key: 13, value: 'JAVA' },
    { key: 14, value: 'C' },
    { key: 15, value: 'Many more' } ] ]

Here we have created two arrays containing various objects and then added these sub-arrays of objects to a base array or parent array.

Example 3: Printing the values of the nested array containing objects.

Javascript

<script>
    const array1 = [ { key : 1 , value : "hello" } , 
                     { key : 2 , value : "Geek" } , 
                     { key : 3 , value : "zambiatek" } ,
                     { key : 4 , value :"JavaScript"} ,
                     { key : 5 , value : "Course" } ];
 
    const array2 = [ { key : 11 , value : "Courses" } ,
                     { key : 12 , value : "C++" } , 
                     { key : 13 , value : "JAVA" } ,
                     { key : 14 , value : "C" },
                     { key : 15 , value : "Many more" } ];
 
    const array = [ array1 , array2 ];
 
    for( let x = 0 ; x < array.length ; x++ )
    {
        for( let y = 0 ; y < array[0].length ; y++)
        {
            console.log( array[x][y].value );
        }
    }
</script>

Output:

hello
Geek
zambiatek
JavaScript
Course
Courses
C++
JAVA
C
Many more

Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!