CODEWITHSUNDEEP
javascripthtml
Suganesh Kumar
Suganesh Kumar

Reputation: 167

JS code to get count values from list then connect with hide/show select option

Greeting...!

I have taken input data as list format, I try to set specified index value counts to show in select option. As per console count values will be shown but in HTML page doesn't show that value. I have attached code and screen shot for your ref,

Kindly give your idea here.

Thanks in Advance. Failure HTML page image and value of console image /home/belstar/Pictures/Screenshot from 2019-09-25 13-07-59.png /home/belstar/Pictures/Screenshot from 2019-09-25 13-08-22.png

markers1 = [
  ['0', 'xxxxxxxxx', xxxxxxxxx, xxxxxxxxx, 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar'],
  ['0', 'xxxxxxxxx', xxxxxxxxx, xxxxxxxxx, 'xxxxxxxxx', 'xxxxxxxxx', 'Ranjith'],
  ['0', 'xxxxxxxxx', xxxxxxxxx, xxxxxxxxx, 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar'],
  ['0', 'xxxxxxxxx', xxxxxxxxx, xxxxxxxxx, 'xxxxxxxxx', 'xxxxxxxxx', 'Abinash'],
  ['0', 'xxxxxxxxx', xxxxxxxxx, xxxxxxxxx, 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar']
];

let b = [];
markers1.forEach(el => {
  b[el[6]] = (b[el[6]] || 0) + 1;
})
console.log(b);
counts = function(marker) {
    var itrep_counts = document.getElementById("branch_counts").innerHtml;
    for (i = 0; i < b.length; i++) {
      console.log(b);
      if ((
          marker.itrep_counts == itrep_counts ||
          itrep_counts.length === 0
        )) {

      } else {


            }
        }
    }
<div>
  <h6> Total Number of Branches attend by the spacified RIT:
    <span id="branch_counts" onchange="counts(this.value);"> </span> </h6>
</div>

Needed Output is : Total Number of Branches attend by the spacified RIT: 10

Upvotes: 1

Views: 220

Answers (2)

Hamza Dahmoun
Hamza Dahmoun

Reputation: 1304

I changed the logic of the code.
I will insert the first name and the number '1' in a new array named 'c',
then will try to check if the names exist already in this new array,
if it already exists I will increase the counter,
else, I will add this name to the array 'c'.
Then I will add the names in the array 'c' to the html as a dropdown list where you can select the name and the number will be automatically displayed
Good luck!

<!doctype html>
<html>

<head>

</head>

<body>

  <div>
    <select id="mySelectElement" onchange="myFunction()">
    </select>
    <h6> Total Number of Branches attend by the spacified RIT:
      <span id="branch_counts">0</span> </h6>
  </div>
  <script>
    markers1 = [
      ['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar'],
      ['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Ranjith'],
      ['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar'],
      ['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Abinash'],
      ['0', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'xxxxxxxxx', 'Jayakumar']
    ];

    let c = [];
    c.push([markers1[0][6], 1]); //inserting only the first element
    for (let i = 1; i < markers1.length; i++) {
      //for each item in markers1 (except the first item) we will check and add it to 'c' array, if it already exists we wil increase the counter
      for (let j = 0; j < c.length; j++) {
        if (c[j].includes(markers1[i][6])) {
          //item in markers1 exist already in 'c', lets increase counter
          c[j][1] = c[j][1] + 1;
          break;
        } else {
          //item in markers1 does not exist in 'c', lets add new item with counter=1
          c.push([markers1[i][6], 1]);
          break;
        }
      }
    }
    //lets append a list of names in our html
    let select = document.getElementById('mySelectElement');
    for (var i = 0; i < c.length; i++) {
      var opt = document.createElement('option');
      opt.value = c[i][0];
      opt.innerHTML = c[i][0];
      select.appendChild(opt);
    }
    myFunction(); //we call it so that it shows the number of the currently selected name (selected when we added the names to the select tag)


    function myFunction() {
      var x = document.getElementById("mySelectElement").value;
      for (let i = 0; i < c.length; i++) {
        if (c[i][0] == x) {
          //console.log(c[i][1]);
          document.getElementById("branch_counts").innerHTML = c[i][1];
          break;
        }
      }
    }
  </script>

</body>

</html>

Upvotes: 1

Hamza Dahmoun
Hamza Dahmoun

Reputation: 1304

I still don't understand what you really want to do, but I have some remarks about your code that may help you:

  1. In your markers1 array you should include all the xxxxxxxxx inside a apostrophes to be 'xxxxxxxxx', because without them JS will think it is a variable that is not declared and will throw an error,
  2. The span tag you wrote will trigger the function 'count()' only when the text inside the span is changed this is how onChange works. But it seems you are not changing the text of the span anywhere! That is why the function 'count()' will never be executed. So you should call that function manually in JS code just after building your array 'b',
  3. Inside the function count(), there are two block of code the 'if' and the 'else' but apparently you are not doing any action there, I understand that you want to write something in your span, so you should do that inside those two blocks of code.
    Good Luck!
    If you could explain more your issue we may the solution.

Upvotes: 0

Related Questions