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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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