Geting the position of an array element in node js express

Question

i have retrieved a list of abjects from firebase onto my ejs file: and i am retrieving them in this manner:

                                  <form id="eventform" method="post" action="/dasha">
                                    <%Object.keys(notes).forEach(function(key){%>
                                <tbody id="event" name="event">

                                    <tr>
                                       <td>1</td>

                                    <input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">

                                    <td id="evname" name="evname"><%=notes[key].event %></td>
                                    </form>
                                    <td><%=notes[key].location %></td>
                                    <td><%=notes[key].codes %></td>
                                    <td><%=notes[key].date %></td>
                                    </tr>
                                    <% }) %>

                                </tbody>

I am however trying to implement an Onclick for so that when an item is clicked on it carries its info to the next page: I have tried to store it in aninput field like:

**<input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">**

But i just cant get the individual item it pulls the whole array when i check for the value.Any help Here is the sample data

Then i use jquery to submit:

$(document).ready(function () {
$("#event").click(function(){
    var en = $("#evname").val();
    $("#categ").val(en);
    $("#eventform").submit();
    });
});

Here is the rendered htmlsource and images /:

<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">
                                          <%Object.keys(notes).forEach(function(key,idx){%>
                                            <tr>
                                               <td id="tid" name="tid" class="tid" ><%= idx %></td>

                                           <form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
                                <input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
                                <input type="hidden" id="idd" name="idd" class="idd" value="<%= idx %>">
 </form>
                                <td id="evname-<%= idx %>"  name="evname-<%= idx %>"><%=notes[key].event %></td> 
                                            <td id="elocation" name="elocation"><%=notes[key].location %></td>
                                            <td id="ecodes" name="ecodes"><%=notes[key].code %></td>
                                            <td id="edate" name="edate"><%=notes[key].date %></td>
                                            </tr>

                                            <% }) %>

                                        </tbody>

Here is the rendered html from the browser:

<tbody id="eventName" class="eventName" style="cursor: crosshair;" name="eventName">

                                        <tr>
                                           <td id="tid" name="tid" class="tid">0</td>

                                       <form name="eventForm-0" class="eventForm" method="post" action="/dasha"></form>
                            <input type="hidden" id="categ-0" name="categ" class="categ" value="zuri.png">
                            <input type="hidden" id="idd" name="idd" class="idd" value="0">

                            <td id="evname-0" name="evname-0">zuri.png</td> 
                                        <td id="elocation" name="elocation">zuri.png</td>
                                        <td id="ecodes" name="ecodes"></td>
                                        <td id="edate" name="edate">-LZfAvzWGudUK78TGtT_</td>
                                        </tr>


                                        <tr>
                                           <td id="tid" name="tid" class="tid">1</td>

                                       <form name="eventForm-1" class="eventForm" method="post" action="/dasha"></form>
                            <input type="hidden" id="categ-1" name="categ" class="categ" value="Africa Tourism Technology and Innovation Awards">
                            <input type="hidden" id="idd" name="idd" class="idd" value="1">

                            <td id="evname-1" name="evname-1">Africa Tourism Technology and Innovation Awards</td> 
                                        <td id="elocation" name="elocation">USIU – Africa</td>
                                        <td id="ecodes" name="ecodes">AA24VI</td>
                                        <td id="edate" name="edate">25th – 26th April, 2019</td>
                                        </tr>


                                        <tr>
                                           <td id="tid" name="tid" class="tid">2</td>

                                       <form name="eventForm-2" class="eventForm" method="post" action="/dasha"></form>
                            <input type="hidden" id="categ-2" name="categ" class="categ" value="2nd Annual Global M I C E Summit">
                            <input type="hidden" id="idd" name="idd" class="idd" value="2">

                            <td id="evname-2" name="evname-2">2nd Annual Global M I C E Summit</td> 
                                        <td id="elocation" name="elocation">Trademark Hotel</td>
                                        <td id="ecodes" name="ecodes">RT79XV</td>
                                        <td id="edate" name="edate">11th – 13th September, 2019</td>
                                        </tr>



                                    </tbody>

I was hoping for a representation of your notes object rather than the DB, because the first thing I can tell you is none of your key names such as event, location etc. match any columns in your db — TommyBs
– TommyBs, Commented Feb 26, 2019 at 10:35
@TommyBs i have re edited the question. and my aonly query is <input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">** cannot hold a single value it takes the whole array. — Sir George
– Sir George, Commented Feb 26, 2019 at 10:42
Can you also add your onclick handler please? If you view the page source is it outputting all that info in the "value" field of the hidden input then? Or is it the handler that's getting the whole array — TommyBs
– TommyBs, Commented Feb 26, 2019 at 10:54

TommyBs · Accepted Answer · 2019-02-27 13:30:51Z

1

You have a number of issues with your code, and despite trying to highlight them in comments there isn't enough space, hence this 'incomplete' answer

For starters you are opening a form tag before your forEach loop. You then close it during the first loop. So on your subsequent iterations there isn't a form to find.

Secondly, you have reused the same ID during the loop, which you should not do as it will generate multiple items with the same ID if you have multiple Objects you're looping through. If you have 2 elements with an ID of 'foo', using multiple of the same ID will lead to unintended consequences , each ID should be unique.

Thirdly you don't have a <table> tag around your tbody, some browsers therefore strip the tbody so you're click event will never fire. Also your rows are within a <tr> element so you should attach your click handler to this.

                         <form id="eventform" method="post" action="/dasha">
                            <%Object.keys(notes).forEach(function(key){%>
                        <tbody id="event" name="event">

                            <tr>
                               <td>1</td>

                            <input type="hidden" id="categ" name="categ" value="<%=notes[key].event %>">

                            <td id="evname" name="evname"><%=notes[key].event %></td>
                            </form> // YOU'RE CLOSING YOUR FORM HERE INSIDE THE LOOP ITERATION
                            <td><%=notes[key].location %></td>
                            <td><%=notes[key].codes %></td>
                            <td><%=notes[key].date %></td>
                            </tr>
                            <% }) %>

                        </tbody>

Now this isn't tested, and as I don't know the complete layout of your page it's a bit of a stab in the dark, but you could try something like the following and see if you have any luck

                                <%Object.keys(notes).forEach(function(key,idx){%>
                           <table>
                            <tbody id="event-<%= idx =>" name="event" class="eventName">

                                <tr class="row">
                                   <td>1</td>
                                 <form name="eventForm-<%= idx %>" class="eventForm" method="post" action="/dasha">
                                <input type="hidden" id="categ-<%= idx %>" name="categ" class="categ" value="<%=notes[key].event %>">
 </form>
                                <td id="evname-<%= idx %>" name="evname-<%= idx %>"><%=notes[key].event %></td> 
                                <td><%=notes[key].location %></td>
                                <td><%=notes[key].codes %></td>
                                <td><%=notes[key].date %></td>
                                </tr>
                                <% }) %>

                            </tbody>
                           </table>

And a click handler similar to

$(document).ready(function () {
$(".row").click(function(ev){
    let form = ev.currentTarget.querySelector('form');
    form.submit()
});

A simpler version using vanilla JS can be found here https://jsfiddle.net/xvag0mj2/

edited Feb 27, 2019 at 13:30

answered Feb 26, 2019 at 12:00

TommyBs

9,7484 gold badges37 silver badges74 bronze badges

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

8 Comments

Sir George Over a year ago

i have tried but now it takes the last value in the list. perhaps if you know a way we can access this <%= idx %> value on the handler script.

TommyBs Over a year ago

Can you post an example of the actual rendered html?

TommyBs Over a year ago

Sorry I meant the rendered source of the html, not a screenshot of it

TommyBs Over a year ago

That doesn't look like the rendered html as you've still got all the <%= idx %> code in there and the <%Object.keys(notes).forEach(function(key,idx){%>, Open the page and use inspect element or similar in your browser to get the actual rendered result html, not the code in your template file

Sir George Over a year ago

i have posted it on the question

|

Collectives™ on Stack Overflow

Geting the position of an array element in node js express

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related