CODEWITHSUNDEEP
javascriptjquerycheckbox
Anwar Benhamada
Anwar Benhamada

Reputation: 345

How to modify a string based on a checkbox array?

I have a function that have :
- Inputs : an array of Data 

[
    {"position":"1","token":"Darién","tag":"PERSON"},
    {"position":"2","token":"Gap","tag":"PERSON"},
    {"position":"3","token":"make","tag":"O"},
]

I iterate that array to get the token and tag and then based on a checkbox selection (person or country ...etc) I make the token string red and show it in a div element. 

 function makeNamesRed(array) {

        let result = ''

        array.forEach((element, index, array) => {
            var word = element.token;
            var tag = element.tag;

            var checkedElements = new Array();
            $("input:checkbox[name=selectionFilter]:checked").each(function () {
                checkedElements.push($(this).val());
            });

            checkedElements.forEach((elementCheck, indexCheck, arrayCheck) => {

                if (word != "-LRB-" && word != "-RRB-") {

                    if (tag == elementCheck) {
                        word = "<span class='namePerson' "
                             + "style='color:red;' "
                             + "data-toggle='tooltip' "
                             + "data-placement='top' "
                             + "title='Name of a person'>" 
                             + word 
                             + "</span>";
                        result += word + " ";
                    }

                    else {
                        result += word + " ";
                    }
                }

            })
        })
        $("#editor").html(" ");
        $("#editor").html(result);
    }

The problem is that looping the selected checkbox array (checkedElements) here

else {
    result += word + " ";
}

adds the words (that are not found) every time again. like so : Darién make make make. Number of repetition in make depends on how many checkboxes are selected.

Do you have an idea how to solve that and make that better ?

EDIT: Here is a Jsfiddle of that scenario :

Scenario

Upvotes: 0

Views: 142

Answers (1)

Tom O.
Tom O.

Reputation: 5941

If I understand your question correctly then the issue is your inner loop. You don't need to check every single item in checkedElements against every single item in array - you just need to check if each item in array has a tag property that matches a value found in checkedElements (use Array.prototype.indexOf to achieve this.)

Below is some code that I think solves your issue (I left out your specific conditional logic but you can add that).

var checkedElements = ["PERSON", "LOCATION", "COUNTRY"];
const spanTemplate = `<span class='namePerson' style='color: red;' data-toggle='tooltip' data-placement='top' title='Name of a person'>{TOKEN}</span>`;

function makeNamesRed(array) {
  let result = '';
  array.forEach(el => {
    if (checkedElements.indexOf(el.tag) > -1) {
      result += spanTemplate.replace(/{TOKEN}/gi, el.token);
    }
  });
  return result;
}

console.log(makeNamesRed([{
    position: 1,
    token: "Darién",
    tag: "PERSON"
  },
  {
    position: 2,
    token: "Gap",
    tag: "PERSON"
  },
  {
    position: 3,
    token: "make",
    tag: "O"
  }
]));

Upvotes: 1

Related Questions