Получение элементов из массива с определенными атрибутами и отображение их в одном div

#javascript #jquery #json

Вопрос:

пример:

 {
  "data": [
    {
      "name": "grape",
      "color": "purple"
    },
    {
      "name": "apple",
      "color": "green"
    },
    {
      "name": "strawberry",
      "color": "red"
    }
  ]
}

Я перебираю массив с помощью этого:

 for (var i=0; i < data.length; i  ) {
  var item = "<button>" data[i].name "</button>";
  $('#items').append(item)
}

Допустим, я хочу, чтобы при нажатии на кнопку отображалось div color значение, но использовалось одно и то же div для каждого элемента в массиве. Как бы я это сделал?

Ответ №1:

Добавьте обработчик событий к кнопкам. Он выполняет поиск в data массиве объекта с тем же именем, что и текст кнопки, и отображает цвет.

 var data = [{
    "name": "grape",
    "color": "purple"
  },
  {
    "name": "apple",
    "color": "green"
  },
  {
    "name": "strawberry",
    "color": "red"
  }
];

for (var i = 0; i < data.length; i  ) {
  var item = "<button data-color="   data[i].color   ">"   data[i].name   "</button>";
  $('#items').append(item)
}

$("button").click(function() {
  var name = $(this).text();
  var obj = data.find(el => el.name == name);
  $("#outputdiv").text(obj.color);
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="items"></div>
<div id="outputdiv"></div>

Ответ №2:

Вы можете прикрепить click обработчик событий к каждой кнопке при их создании, так что при нажатии на эту кнопку обработчик событий отформатирует цель <div> с указанным элементом.

Вот краткая демонстрация:

 const data = [{
    "name": "grape",
    "color": "purple"
  },
  {
    "name": "apple",
    "color": "green"
  },
  {
    "name": "strawberry",
    "color": "red"
  }
];

const displayDatum = (datum) => (event) => 
  $('#output').css({ background: datum.color }).text(datum.name);

for (var i = 0; i < data.length; i  ) {
  var item = $('<button>').text(data[i].name);
  item.click(displayDatum(data[i]));
  $('#items').append(item);
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="items" />
<div id="output" />

Ответ №3:

 var data = [
    {
      "name": "grape",
      "color": "purple"
    },
    {
      "name": "apple",
      "color": "green"
    },
    {
      "name": "strawberry",
      "color": "red"
    }
  ];

for (var i=0; i < data.length; i  ) {
  var item = "<button data-color=" data[i].color ">" data[i].name "</button>";
  $('#items').append(item)
}

$( "button" ).click(function() {
  $("#output" ).css('background', $(this).attr("data-color"));
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="items" />
<div id="output" style="width:100%; height:20px"/>

Ответ №4:

вы можете использовать чистый js

 let d={"data":[{"name":"grape","color":"purple"},
  {"name":"apple","color":"green"},{"name":"strawberry","color":"red"}]}

let b= (i) => {
  box.style.background=d.data[i].color;
  box.innerText = d.data[i].name;
}

d.data.map((x,i)=>btns.innerHTML =`<button onclick="b(${i})">${x.name}</button>`)

 #box { margin:10px; width:99px; height:99px; color:#fff; transition:1s }

 <div id="btns"></div>
<div id="box"></div>