1

Из за недостаточных знаний 2 дня голову ломаю как это осуществить. Есть массив:

var array = [
   {id:1,name:"name1",img:"/images/img1.jpg",url:"http://url.ru/1"},
   {id:2,name:"name2",img:"/images/img2.jpg",url:"http://url.ru/2"}
];

Нужно с помощью jQuery находить в html теги с атрибутами типа data-price="{'1','name'}" и подставлять туда значения из расчета что 1 значение атрибута "id" а второе значение это имя ячейки массива. Соответственно должно получиться следущее:

{'1', 'name'} = name1

{'2', 'img'} = /images/img2.jpg

До этого использовал простую конструкцию но теперь понадобилось использовать массив.

jQuery('.name').html('Николай');

2 ответа 2

2

Решение по факту:

var array = [
   {id:1,name:"name1",img:"/images/img1.jpg",url:"http://url.ru/1"},
   {id:2,name:"name2",img:"/images/img2.jpg",url:"http://url.ru/2"}
];

$('[data-price]').each(function() {
  var attrData = $(this).attr('data-price').replace(/\'/g, '"'); // получаем данные с аттрибута и заменяем все ' на "
  var data = JSON.parse(attrData); // парсим этот json в объект
  for (var key in data) { // перебираем ключи распаршенного объекта
    var entry = array.find(function (e) { return e.id == key;}); // находим объект в массиве array
    $(this).text(entry[data[key]]); // сетаем данные. Пример: для {'1':'name'} получается key==1, data[key]=="name", entry[data[key]]=="name1"
    return;
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-price="{'1':'name'}"></div>
<div data-price="{'2':'url'}"></div>

Но, на вашем месте я бы разбил внутренний json на два аттрибута, или хотя бы записывал как массив а-ля [1,'name'].

2

В случае, если это не критично, то можно разделить data-price на два разных атрибута. Тогда реализация будет такой:

let array = [{
    id: 1,
    name: "name1",
    img: "/images/img1.jpg",
    url: "http://url.ru/1"
  },
  {
    id: 2,
    name: "name2",
    img: "/images/img2.jpg",
    url: "http://url.ru/2"
  }
]

$('[data-element-id]').each((index, node) => {
  let id = node.dataset.elementId
  let field = node.dataset.field
  for(let i in array) {
    if(array[i].id == id) {
      node.innerHTML = array[i][field]
      break
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-element-id="1" data-field="name"></div>
<div data-element-id="1" data-field="img"></div>
<div data-element-id="2" data-field="name"></div>
<div data-element-id="2" data-field="img"></div>

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

let array = [{
    id: 1,
    name: "name1",
    img: "/images/img1.jpg",
    url: "http://url.ru/1"
  },
  {
    id: 2,
    name: "name2",
    img: "/images/img2.jpg",
    url: "http://url.ru/2"
  }
]

$('[data-price]').each((index, node) => {
  let price = node.dataset.price;
  price = '[' + price.substr(1,price.length-2) + ']'
  let args = JSON.parse(price.replace(/'/g, '"'))
  for(let i in array) {
    if(array[i].id == args[0]) {
      node.innerHTML = array[i][args[1]]
      break
    }
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-price="{'1','name'}"></div>
<div data-price="{'1','img'}"></div>
<div data-price="{'2','name'}"></div>
<div data-price="{'2','img'}"></div>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.