Access value in a nested array javascript?

Question

0.00/5 (No votes)

See more:

I created the array "arr" to take the guests name and number of guests from the and want to show in the window like this:
Guest's name: ......
Person number: ......
Here is my code and when I tried it it can't defined the value in the array. "guest_name" and "person_number" are the variables which take value from DOM input elements

<!DOCTYPE html>
<html lang="jp">
<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>レストランの入店待ち</title>
</head>
<body>
    <p>Name:<input type="text" id="name"></p>
    <p>Number of person:<input type="text" id="number"></p>
    <button onclick="Reserve()">Reserve</button>
    <p><span id="guest_in"></span></p>
    <p><span id="wait_pair"></span></p>
    <p><span id="total_person"></span></p>
    <br><button onclick="Guide()">Guide</button>
    <p><span id="guest_out"></span></p>
    <script>
        let arr = [];
        let guest_in = document.querySelector("#guest_in");
        let guest_number = document.querySelector("#number");
        function Reserve()
        {
            let guest_name = document.querySelector("#name").value;
            let guest_num = document.querySelector("#number").value;
            let person_number = Number(guest_num);
            arr.push[{name:guest_name, number: person_number}];
            guest_in.innerHTML = `Guest's name: ${arr[0].guest_name}<br>number of 
            guests:${arr[0].person_number}`;
    
        }  
    </script>
</body>
</html>

What I have tried:

If I made the array simply like

arr.push[guest_name,person_number];
 guest_in.innerHTML = arr;

Then it will displayed the name also the number every time I hit the button "Reserve" but it will not display the format I would like to do as above.

Posted 27-Jul-21 7:12am

Member 14629414

Updated 28-Jul-21 6:30am

Add a Solution

Comments

SeeSharp2 27-Jul-21 13:48pm

You are confusing arrays and json. See https://www.w3schools.com/js/js_arrays.asp.

Or google for arrays of objects.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard Deeming · Accepted Answer · 2021-07-28T06:30:00

Two problems:

1) Your arr.push call needs to use round brackets rather than square brackets:

JavaScript

arr.push({name:guest_name, number: person_number});

2) The object you've added to the array has properties called name and number, so you can't refer to the non-existent properties guest_name and guest_number. You need to use the correct property names: