Jquery matching values

Question

Hi I am trying to do an if statement to see if values have an exact match in an array. Then I want it the sibling element to show the html of what the exact match is. Can someone help please! I use TWIG for the HTML from Advanced Custom Fields Wordpress plugin. Image of all the locations that I want to say only once with the number of times they are mentioned. This is for a filter functionality. Eventually want to have a dropdown like https://codepen.io/luciopaiva/pen/YXYGYE?editors=101 with a locations tab.

Jquery

 //exact match
 $(".filter-dropdown .course-location").each(function(i,e) {
  myDivObj = $(this).val() == $(this).val();
    if ($(this).val() == $(this).val()) {
      console.log()
      $(this).parent('.filter-dropdown').siblings('.class-location').children('h4').html(myDivObj);
      $(this).parent('.filter-dropdown').siblings('.class-location').children('span').html($(".course-location").length);
    }
    else {

      console.log('unknown');
    }
  });

HTML

             <div class="filter" id="course-location">
              <div class="upper-filter"><h3>Locations</h3><i class="fas fa-angle-down"></i></div>
              {% for category in bloc.training_course_list_compact.course_categories %}
              {% for locationcourse in category.get_field('courses') %}
              {% for location in locationcourse.get_field('dates') %}
              <div class="filter-dropdown">
                <div class="course-location" value="{{ location.location }}"></div>
              </div>
              {% endfor %}
              {% endfor %}
              {% endfor %}
                <div class="class-location"><h4></h4><p></p><span></span></div>
            </div>

So... you want to collect unique `location.location`s and their number of matches? — msg, Apr 27 '20 at 20:38
yes! So if the value is the same, then it will populate in the .class-location div and show the number of of matches for that specific match. — mgonz, Apr 27 '20 at 21:28

score 0 · Accepted Answer · answered Apr 28 '20 at 01:10

0

So I'd collect all values using .map and then .reduce it into an object with the format { city: count }. Lastly, you can create html elements and insert them in the dom.

// Extract the values to an array
let locations = $('.course-location').map((i, e) => $(e).data('value')).toArray();

let reducer = (a, c) => {
  // If the city doesn't exist 
  a[c] === undefined ?
    a[c] = 1 : // One occurrence, else
    a[c] = a[c] + 1;  // Increment count
  return a;
}

let location_count = locations.reduce(reducer, {});

// Create HTML Elements
for (var place in location_count) {
  $('.class-location').append(`<h4>${place}</h4><span>${location_count[place]}</span>`)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="course-location" data-value="Crowley, Texas"></div>
<div class="course-location" data-value="Denver, Colorado"></div>
<div class="course-location" data-value="Houston, TX"></div>
<div class="course-location" data-value="Denver, Colorado"></div>
<div class="course-location" data-value="Dallas, Texas"></div>
<div class="course-location" data-value="Crowley, Texas"></div>

 <div class="class-location"></div>

answered Apr 28 '20 at 01:10

msg

7,863
3
14
33

So I did the same thing for the dates, do you know how i can filter them by most recent date? it is formatted like February 26, 2020. and alphabetically for the locations? – mgonz Apr 28 '20 at 19:11
@mgonz Convert to [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) and [`.sort`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort). – msg Apr 28 '20 at 22:41
where do i convert this?? – mgonz Apr 29 '20 at 13:44
let locations = $('.course-location').date((i, e) => $(e).sort('value')).toArray(); – mgonz Apr 29 '20 at 13:49
@mgonz If the date format is parseable, something like this: `let unique_dates = new Set($('course-date').map((i, d) => Date.parse($(d).data('value'))).sort())` – msg Apr 29 '20 at 14:28
Uncaught TypeError: object is not iterable (cannot read property Symbol(Symbol.iterator)) I replaced what you provided. – mgonz Apr 29 '20 at 15:01
@mgonz It's `'.course-date'`, it's missing a period. The gist of it [works](https://jsfiddle.net/gLma14hz/)... You'd have to format/parse if you want different date formats. – msg Apr 29 '20 at 15:16
Thank you. I will keep working on it. It is still giving me the error though. i was wondering also if i am able to do the same thing for adding a class or ID. Like how you originally did it but if there is a way that it can check the ID or class as well as the data-value?? – mgonz Apr 29 '20 at 15:41
@mgonz Sure you could, but I'm afraid you'd have to put another question up. If you want to do multiple things at once it might be better to do it some other way. If it's just that, it'll be far simpler (and probably covered in the site already). I'd have to see what we are working with and the desired result. – msg Apr 29 '20 at 15:45
Okay i posted a new question if you want to take a look at it: https://stackoverflow.com/questions/61507552/adding-the-id-or-class-into-the-exact-match-element – mgonz Apr 29 '20 at 17:12

Jquery matching values

1 Answers1

Linked