JavaScript map(function) return this.value - finding the last element in the array

Question

Following the previous query:

Javascript - map(function) return this.value - comma on wrong side

I have one of the elements, which I would like to have distinguished. Namely, I want the " - " element behind this object.

I found some solutions here:

Javascript Map Array Last Item

and tried to fiddle with my code, which unfortunately didn't work.

HTML:

      <fieldset id="ophealth_safety">
      <div>
      <input type="checkbox" id="opladdert" name="health_safety" value="Triple ladders">
      <label class="checking" for="opladder">Triple Ladders</label>
      </div>
      <div>
      <input type="checkbox" id="opgardens" name="health_safety" value="Access private gardens required">
      <label class="checking" for="opgardens">Access private gardens required</label>
      </div>
      <div>
      <input type="checkbox" id="opskylight" name="health_safety" value="Skylight">
      <label class="checking" for="opskylight">Skylight</label>
      </div>
      <div>
      <input type="checkbox" id="oploft" name="health_safety" value="Access Loft">
      <label class="checking" for="oploft">Access Loft</label>
      </div>
      <div>
      <input type="checkbox" id="oproof" name="health_safety" value="Access to roof">
      <label class="checking" for="oproof">Access to roof</label>
      </div>
      <div>
      <input type="checkbox" id="opother" name="health_safety" value="Other">
                                                <label class="checking" for="opother">Other</label>
                                                <input type="text" id="opotherdesc" name="other" pattern="[A-Za-z].{4,}" title="The text should include at least 4 letters" placeholder="Please specify">
                                            </div>
                                        </fieldset>

JAVASCRIPT:

    var healthSafety = $('input:checkbox[name=health_safety]:checked').map(function() {
    const lastIndex = row.length - 1;
    row.map((rank, i) => {
        if (i === lastIndex) {
            .join(" - ")
        } else {
            return this.value;
            }).get().join(", ")
    });

I have currently:

HEALTH AND SAFETY: Access private gardens required, Access Loft, Other ceiling

and I want something like this:

HEALTH AND SAFETY: Access private gardens required, Access Loft, Other - ceiling

What is missing in my code?

Please, reformat your html code, so the code gets a better readability. Thanks. — Reporter, Jul 16 '21 at 08:22
If the callback of `.map()` does not return a value in every path or if you don't use the return value of `.map()` then `.map()` is not the right tool. — Andreas, Jul 16 '21 at 08:23
Why the nested maps()? hard to understand what is happening? — Tushar Shahi, Jul 16 '21 at 08:25
`row.slice(0, -1).join(", ") + " - " + row.slice(-1)` or just a plain old `for` loop, or `.reduce()`, or ... — Andreas, Jul 16 '21 at 08:28
@Andreas .map(function() { return this.value; }) .get() row.slice(0, -1).join(", ") + " - " + row.slice(-1); doesn't work. Where this row.slice should go? — Geographos, Jul 16 '21 at 09:28

majusebetter · Answer 1 · 2021-07-16T11:34:16.400

0

I'm not sure I get your problem right, but I will try to help.

The first problem you would like to solve is to get a comma-separated list of values of checked checkboxes, which could be something like this:

const selector = 'input[name="health_safety"]:checked';
const values = Object.values(document.querySelectorAll(selector)).map(input => input.value);

Now that you have your list, you want to check whether "Other" (last element) is available in the list. If yes, you want to append '-' followed by the value of the text input:

let healthSafety = values.join(', ') + (
    values[values.length - 1] === 'Other' 
        ? ' - ' + document.getElementById('opotherdesc').value 
        : ''
);

https://jsfiddle.net/afe8otzn/3/

edited Jul 16 '21 at 11:34

answered Jul 16 '21 at 10:07

majusebetter

1,458
1
4
13

It works on JSFiddle, but how to combine it with var healthSafety = $('input:checkbox[name=health_safety]:checked') I tried: var healthSafety = const selector = 'input[name="health_safety"]:checked;' I think everythig should go within some function – Geographos Jul 16 '21 at 10:45
I'm not sure I understand what you mean. The resulting string is stored in `result`. You can instead assign it to `healthSafety` if you like :) – majusebetter Jul 16 '21 at 11:16
Could you show me how to include it in var healthSafety ? – Geographos Jul 16 '21 at 11:22

JavaScript map(function) return this.value - finding the last element in the array

1 Answers1