Как получить данные JSON на основе значений HTML, используя JQuery? - PullRequest
Новая
       17

Как получить данные JSON на основе значений HTML, используя JQuery?

0 голосов
/ 06 мая 2019

Я новичок в jquery, но я хочу закончить свой проект.

Мне нужна ваша помощь, ребята, я хочу, чтобы я сделал html 

<li value="bca"></li>
<li value="bni"></li>
<li value="bri"></li>
<li value="mandiri"></li>
etc....

jquery получает данные на основе jsonна значение HTML.затем, получив его, я хочу добавить атрибут style background-image на основе этого значения li, результат будет примерно таким: 

<li style="background-image:url("images/bca.png");" value="bni"></li>

это файл json 

[
   {
     "id": "bca",
     "image": "https://lh3.googleusercontent.com/-DzsioYaEw00/XJx4ldwgXbI/AAAAAAAAFOA/6xR4vKNHJnYPzyAmN_sike27rzTozXW8QCLcBGAs/h110/bca.png"
   },
   {
     "id": "bni",
     "image": "https://lh3.googleusercontent.com/-Km8RS__aFmY/XJx4lSZom7I/AAAAAAAAFOE/D6BYDFfRpUQdKILGREKGtKN8lLsjMijzACLcBGAs/h107/bni.png"
   },
   {
     "id": "bri",
     "image": "https://lh3.googleusercontent.com/-_si-RcoPgn8/XJx4laAI9DI/AAAAAAAAFN8/H6p0uAGp5LsjeETFJCO0wrX0IVRUMRsOQCLcBGAs/h71/bri.png"
   },
   {
     "id": "mandiri",
     "image": "https://lh3.googleusercontent.com/-7wME_gGOqlE/XJx4nKuMKoI/AAAAAAAAFOQ/e_g1zof81zA4RtoLvhXId-u5bbwynm2fgCLcBGAs/h105/mandiri.png"
   }
]

это мой jquery 

$(document).ready(function() {
  $.getJSON('https://vhlan.com', function(data) {
    $.each(data, function(key, icon) { // "icon" to get data from json file example icon.image
    // I don't know this part
      });
    });
  });

Ответы [ 2 ]

0 голосов
/ 06 мая 2019

Вы можете попробовать это: 

$(document).ready(function() {
  $.getJSON('https://api.myjson.com/bins/yrgg4', function(data) {
    $.each(data, function(key, icon) { 
            $("li[value='" + icon.id + "']").css("background", "url(" + icon.image + ") no-repeat");
      });
    });
  });

Подробнее: посетите это

0 голосов
/ 06 мая 2019

Измените свой атрибут на значение данных. Значение не является допустимым атрибутом данных HTML. 

$(document).ready(function() {
  $.getJSON('https://api.myjson.com/bins/yrgg4', function(data) {
    $.each(data, function(key, icon) { // "icon" to get data from json file example icon.image
      // Select based on attribute value.
      // Use css() to add icon to background-image
      $("[data-value='" + icon.id + "']").css("background-image", "src(" + icon.image + ")");
      });
    });
  });
...