Как создать цикл jQuery для изменения якорных ссылок на основе файла JSON

Question

У меня есть страница, которая содержит раскрывающийся список выбора, в котором содержатся названия стран, а затем отображаются логотипы брендов, базирующихся в этой стране.

Однако у каждого из этих брендов есть URL-адрес конкретной страны, который потребуетсяизменить в зависимости от выбранной пользователем страны из списка выбора.

В файле JSON есть названия брендов, которые совпадают с теми же именами, которые использовались для моего атрибута данных.

Вот представление о том, как JSONСтруктура такова:

{
"US": [
    { "Brand": "Brand1", "Link": "http://www.example.com/" }
],
"Germany": [
    { "Brand": "Brand1", "Link": "http://www.example.com/de" },
    { "Brand": "Brand2", "Link": "http://www.example.com/germany" }
],
"France": [
    { "Brand": "Brand1", "Link": "http://www.example.com/france" },
    { "Brand": "Brand3", "Link": "http://www.example.com/fr" },
    { "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
    { "Brand": "Brand5", "Link": "http://www.example.com/francais" }
],
"UK": [
    { "Brand": "Brand1", "Link": "http://www.example.net/" },
    { "Brand": "Brand3", "Link": "http://www.example.org" },
    { "Brand": "Brand6", "Link": "http://www.example.co.uk" }
]
}

Как я могу перебрать свой список логотипов брендов, используя jQuery, используя атрибут data-brand-name в моей разметке, чтобы изменить якорные ссылки на основе того, что у меня есть в моем файле JSON?

Например, например:

Когда пользователь выбирает Францию ​​из выпадающего списка, появляются бренды, принадлежащие французскому языку.Я хочу, чтобы французские ссылки для этих брендов были добавлены в привязку тегов li.

Вот пример моего HTML:

<select name="select-choice" id="selectCountry">
    <option value="UK">UK</option>
    <option value="US">US</option>
    <option value="Germany">Germany</option>
    <option value="France">France</option>
</select>

<div class="brand-logo--wrapper container">
    <ul class="flex">
        <li class="brand-logo-bg brand1 green-underline" data-brand-name="Brand1">
            <a href="" target="_blank"></a>
        </li>
        <li class="brand-logo-bg brand2 green-underline" data-brand-name="Brand2">
            <a href="" target="_blank"></a>
        </li>
        <li class="brand-logo-bg brand3 green-underline" data-brand-name="Brand3">
            <a href="" target="_blank"></a>
        </li>
        <li class="brand-logo-bg brand4 green-underline" data-brand-name="Brand4">
            <a href="" target="_blank"></a>
        </li>
        <li class="brand-logo-bg brand5" data-brand-name="Brand5">
            <a href="" target="_blank"></a>
        </li>
        <li class="brand-logo-bg brand6" data-brand-name="Brand6">
            <a href="" target="_blank"></a>
        </li>
    </ul>
</div>

Answer 1

Вам не нужны жестко запрограммированные пустые ссылки, которые нужно зациклить и настроить.Просто создайте элементы списка и ссылки динамически, основываясь на цикле над вашим объектом, а затем добавьте вновь созданные элементы в список.

См. Комментарии для получения дополнительной информации:

let myObj = {
  "US": [
    { "Brand": "Brand1", "Link": "http://www.example.com/" }
  ],
  "Germany": [
    { "Brand": "Brand1", "Link": "http://www.example.com/de" },
    { "Brand": "Brand2", "Link": "http://www.example.com/germany" }
  ],
  "France": [
    { "Brand": "Brand1", "Link": "http://www.example.com/france" },
    { "Brand": "Brand3", "Link": "http://www.example.com/fr" },
    { "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
    { "Brand": "Brand5", "Link": "http://www.example.com/francais" }
  ],
  "UK": [
    { "Brand": "Brand1", "Link": "http://www.example.net/" },
    { "Brand": "Brand3", "Link": "http://www.example.org" },
    { "Brand": "Brand6", "Link": "http://www.example.co.uk" }
  ]
};


// Locate the correct DOM element to work with
let $list = $("ul.flex");

// Set up a change event handler on the select
$("#selectCountry").on("change", function(){

  $list.html("");                 // Clear out old list entries
  let country = $(this).val();    // Store the country name

  // Loop over all the corresponding links in the object
  $(myObj[country]).each(function(idx, item){
    // Conditionally set the green-underline class
    let gu = this.Brand.replace("Brand", "") > 4 ? "" : "green-underline";
    
    // Create a new bullet with hyperlink in it
    let $newItem = $('<li class="brand-logo-bg ' + item.Brand + ' ' + gu + ' ' + country + '" data-brand-name="' + item.Brand + '"><a href="' + item.Link + '" target="_blank">' + item.Brand + '</a></li>');

    // and append to list
    $list.append($newItem);
  });
  
});

li { padding-bottom: 3px; }
.green-underline a { text-decoration:none; border-bottom:2px dashed green; }
.US { background-color:aliceblue; }
.Germany { background-color:lightgreen; }
.France { background-color:#f99; }
.UK { background-color:#ff9; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
    <option value="">--- Please Select Country ---</option>
    <option value="UK">UK</option>
    <option value="US">US</option>
    <option value="Germany">Germany</option>
    <option value="France">France</option>
</select>

<div class="brand-logo--wrapper container">
        <ul class="flex"></ul>
</div>

Answer 2

В качестве решения я сначала перебираю ключи страны и добавляю их в выбор с помощью append().Затем, когда кто-то выбирает одну страну, он обновляет список своими именами и ссылками, которые принадлежат этой стране.

objs = {
  "US": [
      { "Brand": "Brand1", "Link": "http://www.example.com/" }
  ],
  "Germany": [
      { "Brand": "Brand1", "Link": "http://www.example.com/de" },
      { "Brand": "Brand2", "Link": "http://www.example.com/germany" }
  ],
  "France": [
      { "Brand": "Brand1", "Link": "http://www.example.com/france" },
      { "Brand": "Brand3", "Link": "http://www.example.com/fr" },
      { "Brand": "Brand4", "Link": "http://www.example.com/french-site" },
      { "Brand": "Brand5", "Link": "http://www.example.com/francais" }
  ],
  "UK": [
      { "Brand": "Brand1", "Link": "http://www.example.net/" },
      { "Brand": "Brand3", "Link": "http://www.example.org" },
      { "Brand": "Brand6", "Link": "http://www.example.co.uk" }
  ]
};

$.each(objs, function(country, brands){
  $("#selectCountry").append('<option value="' + country + '">' + country + '</option>');
});

$("#selectCountry").change(function(){
  let brands = objs[$("#selectCountry").val()];
  $.each(brands, function(key, brand){
    $("#myList").append('<li class="brand-logo-bg ' + brand.Brand.toLowerCase() + ' green-underline" data-brand-name="' + brand.Brand + '"><a href="' + brand.Link + '" target="_blank">' + brand.Brand + '</a></li>');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="select-choice" id="selectCountry">
  <option value=""></option>
</select>
<div class="brand-logo--wrapper container">
  <ul class="flex" id="myList"></ul>
</div>

Надеюсь, это поможет!

Answer 3

Добавьте onchange прослушиватель событий в select и передайте значение выбранной опции.Получить значение, используя выбранную опцию из json.

Вместо жесткого кодирования списка в html, создайте динамический li во время итерации json

let json = {
  "US": [{
    "Brand": "Brand1",
    "Link": "http://www.example.com/"
  }],
  "Germany": [{
      "Brand": "Brand1",
      "Link": "http://www.example.com/de"
    },
    {
      "Brand": "Brand2",
      "Link": "http://www.example.com/germany"
    }
  ],
  "France": [{
      "Brand": "Brand1",
      "Link": "http://www.example.com/france"
    },
    {
      "Brand": "Brand3",
      "Link": "http://www.example.com/fr"
    },
    {
      "Brand": "Brand4",
      "Link": "http://www.example.com/french-site"
    },
    {
      "Brand": "Brand5",
      "Link": "http://www.example.com/francais"
    }
  ],
  "UK": [{
      "Brand": "Brand1",
      "Link": "http://www.example.net/"
    },
    {
      "Brand": "Brand3",
      "Link": "http://www.example.org"
    },
    {
      "Brand": "Brand6",
      "Link": "http://www.example.co.uk"
    }
  ]
}


function showBrand(val) {
  let brandList = '';
  json[val].forEach(function(item) {
    brandList += `<li class="brand-logo-bg brand1 green-underline" data-brand-name="${item.Brand}">
      <a href="" target="_blank">${item.Brand}</a>
    </li>`
  })
  document.getElementById('brands').innerHTML = brandList;
}

<select name="select-choice" id="selectCountry" onchange='showBrand(this.value)'>
  <option value="" selected>Select</option>
  <option value="UK">UK</option>
  <option value="US">US</option>
  <option value="Germany">Germany</option>
  <option value="France">France</option>
</select>

<div class="brand-logo--wrapper container">
  <ul class="flex" id='brands'>
  </ul>
</div>