How to combine array elements into a new array?

Question

New to Javascript (and coding in general, outside of Excel functions) and hoping that someone might help point me in the right direction. I have searched online, but have not found a clear-cut answer.

I have two arrays - one with the days of the week and one with people's first and last names. I am picking a random index number from the array with people's names, and attempting to assign the first and last name to a day, then placing all three values into a new array. I am then printing this final array into an HTML table.

The array containing the days is one-dimensional, and is simply Sunday through Saturday. The array containing the people's names is what I understand to be effectively two-dimensional, their First Name and Last Name.

I got this working by hard-coding the third array, but I'd like to dynamically create the array instead. I cannot seem to get the array.push() method to work how I want, and I'm hoping that someone is willing to help.

Of note - I am picking the random index number by creating yet another array that picks a seven random numbers between 0 and the length of the people array. The push method works properly in this scenario.

I've tried using the array.push() method but cannot seem to get it working the way I intend. It either returns a blank value or what seems like jibberish, though I think it's random letters from the people array.

//This is my working code.  The script tag is after the body elements because I need to create some of the body elements before I run the script.

 <body>        
    <table id="Week1Table" class="center">
        <tr>
            <th class="Week1">Week 1</th>
            <th class="Week1">First Name</th>
            <th class="Week1">Last Name</th>
        </tr>
    </table>

    <table id="Week2Table" class="center">
        <tr>
            <th class="Week2">Week 2</th>
            <th class="Week2">First Name</th>
            <th class="Week2">Last Name</th>
        </tr>
    </table>

    <script>            
        var people = [
            ["Andre", "the Giant"],
            ["Randy", "Savage"],
            ["Steve", "Austin"],
            ["The", "Rock"],
            ["Man", "Kind"],
            ["Steel", "Cage"],
            ["I", "Quit"]
        ];
        var week1schedule = [
            "Sunday",
            "Monday",
            "Tuesday",
            "Wednesday",
            "Thursday",
            "Friday",
            "Saturday"
        ];

        var week2schedule = week1schedule;

        var peoplePicker = []
        while(peoplePicker.length < week1schedule.length*2){
            var r = Math.floor(Math.random()*people.length);
            if(peoplePicker.indexOf(r) === -1) peoplePicker.push(r);
        };


//This is the final array, and the one that I would like to create dynamically rather than statically.

        var peopleRandomizerTable = [];
        peopleRandomizerTable[0] = week1schedule[0];
        peopleRandomizerTable[1] = people[peoplePicker[0]][0];
        peopleRandomizerTable[2] = people[peoplePicker[0]][1];
        peopleRandomizerTable[3] = week1schedule[1];
        peopleRandomizerTable[4] = people[peoplePicker[1]][0];
        peopleRandomizerTable[5] = people[peoplePicker[1]][1];
        peopleRandomizerTable[6] = week1schedule[2];
        peopleRandomizerTable[7] = people[peoplePicker[2]][0];
        peopleRandomizerTable[8] = people[peoplePicker[2]][1];
        peopleRandomizerTable[9] = week1schedule[3];
        peopleRandomizerTable[10] = people[peoplePicker[3]][0];
        peopleRandomizerTable[11] = people[peoplePicker[3]][1];
        peopleRandomizerTable[12] = week1schedule[4];
        peopleRandomizerTable[13] = people[peoplePicker[4]][0];
        peopleRandomizerTable[14] = people[peoplePicker[4]][1];
        peopleRandomizerTable[15] = week1schedule[5];
        peopleRandomizerTable[16] = people[peoplePicker[5]][0];
        peopleRandomizerTable[17] = people[peoplePicker[5]][1];
        peopleRandomizerTable[18] = week1schedule[6];
        peopleRandomizerTable[19] = people[peoplePicker[6]][0];
        peopleRandomizerTable[20] = people[peoplePicker[6]][1];
        peopleRandomizerTable[21] = week2schedule[0];
        peopleRandomizerTable[22] = people[peoplePicker[7]][0];
        peopleRandomizerTable[23] = people[peoplePicker[7]][1];
        peopleRandomizerTable[24] = week2schedule[1];
        peopleRandomizerTable[25] = people[peoplePicker[8]][0];
        peopleRandomizerTable[26] = people[peoplePicker[8]][1];
        peopleRandomizerTable[27] = week2schedule[2];
        peopleRandomizerTable[28] = people[peoplePicker[9]][0];
        peopleRandomizerTable[29] = people[peoplePicker[9]][1];
        peopleRandomizerTable[30] = week2schedule[3];
        peopleRandomizerTable[31] = people[peoplePicker[10]][0];
        peopleRandomizerTable[32] = people[peoplePicker[10]][1];
        peopleRandomizerTable[33] = week2schedule[4];
        peopleRandomizerTable[34] = people[peoplePicker[11]][0];
        peopleRandomizerTable[35] = people[peoplePicker[11]][1];
        peopleRandomizerTable[36] = week2schedule[5];
        peopleRandomizerTable[37] = people[peoplePicker[12]][0];
        peopleRandomizerTable[38] = people[peoplePicker[12]][1];
        peopleRandomizerTable[39] = week2schedule[6];
        peopleRandomizerTable[40] = people[peoplePicker[13]][0];
        peopleRandomizerTable[41] = people[peoplePicker[13]][1];  

        var table1 = document.getElementById("Week1Table");
        var table2 = document.getElementById("Week2Table");
        var peopleRandomizerCount = 0;


//This populates the two tables.  Two weeks; one table for each week.

        for(var rowCount = 0; rowCount < 7; rowCount++)
        {
        // create a new row
        var newRow = table1.insertRow(table1.length);
        for(var columnCount = 0; columnCount < 3; columnCount++)
            {
                // create a new cell
                var cell = newRow.insertCell(columnCount);

                // add value to the cell
                cell.innerHTML = peopleRandomizerTable[peopleRandomizerCount];
                cell.className = "people";
                peopleRandomizerCount++;
            }
        }

        for(var rowCount = 0; rowCount < 7; rowCount++)
        {
        // create a new row
        var newRow = table2.insertRow(table1.length);
        for(var columnCount = 0; columnCount < 3; columnCount++)
            {
                // create a new cell
                var cell = newRow.insertCell(columnCount);

                // add value to the cell
                cell.innerHTML = peopleRandomizerTable[peopleRandomizerCount];
                cell.className = "people";
                peopleRandomizerCount++;
            }
        }
    </script>
</body>

You can use 2 for loops to create that table in code instead of manually, but I would highly recommend you rewrite your 2D arrays using objects instead like bhuvnesh answered. — dandeto
– dandeto, Commented Jul 27, 2019 at 6:51
Also, you don't have to create another array to store the random indecies. You can just select the data from a random index when assigning to your table by creating a function and calling that (instead of an extra array floating around). — dandeto
– dandeto, Commented Jul 27, 2019 at 6:57

bhuvnesh pattnaik · Accepted Answer · 2019-07-27 06:10:22Z

1

You don't need to use 2 dimensional Array for first and last name,

You can simply use one dimensional array of object containing first and last name like below :

let people = [
            { 
              "firstName": "Andre", 
              "lastName": "the Giant"
            },
            { 
              "firstName": "Randy", 
              "lastName": "Savage"
             }
            ]

Now I guess You might know how to combine 2 one dimensional Array. If not please let me know

answered Jul 27, 2019 at 6:10

bhuvnesh pattnaik

1,49310 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to combine array elements into a new array?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related