JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<select class="maleprefer">
  <option>Select a preference</option>
  <option value="some preference.">Some Preference</option>
  <option value="some other preference.">Some Other Preference</option>
  <option value="something else.">Something Else</option>
</select>

<div class="preferences-male" data-malepreftest='[{"preference":"some preference.","product_link":{"title":"Buy Now","url":"http:\/\/google.com\/1","target":""}},{"preference":"some other preference.","product_link":{"title":"Buy Now","url":"http:\/\/google.com\/2","target":""}}]'>
  <div class="append-product"></div>
</div>

JavaScript

$('.maleprefer').change(function() {
    let malePrefChoice = $(this).val()

    $('.preferences-male').each(function (i, preference) {

        let json = $(preference).data('malepreftest')

        console.log(json)

        let pref = json.filter(item => item.preference == malePrefChoice).map(x => x.product_link.url)
        let url = pref.length ? pref[0] : null

        if (url) {
            $('.append-product').html(url)
        } else {
            alert("is NOT in array")
        }
    });
});