Как выбрать из массива js нужные ключи?

Question

[Nik1712]

есть несколько групп элементов с атрибутами. всегда один элемент в группе выбран (класс selected). по клику выбор может меняться.

<div>
  <a data-attribute-name="type"
     data-attribute-value="34"></a>
<a data-attribute-name="type"
     data-attribute-value="35" class="selected"></a>
</div>

<div>
  <a data-attribute-name="color"
       data-attribute-value="white"></a>
  <a data-attribute-name="color"
       data-attribute-value="black" class="selected"></a>
  <a data-attribute-name="color"
       data-attribute-value="red"></a>
</div>
 
<div> 
  <a data-attribute-name="size"
       data-attribute-value="big"></a>
  <a data-attribute-name="size"
       data-attribute-value="small" class="selected"></a>
  <a data-attribute-name="size"
       data-attribute-value="middle"></a>
</div>

есть некоторый массив (в нем для каждого ключа могут быть как все, так и не все атрибуты)

var arr = {"10002":{"color":"black", "type":"34", "size":"small"},"10003":{"color":"white", "type":"34", "size":"big"}}

как перебрать массив, чтоб при всех выбранных элементах с дата-атрибутами name и value, соответствующим ключу-значению id, например 10002, выводилось true?

$(function() {
			$('a').on('click' , function() {  

				var attributeName = $(this).attr('data-attribute-name');

				var attributeValue = $(this).attr('data-attribute-value');

				$(this).siblings('.attributename').removeClass('selected');

				$(this).addClass('selected');

				for(var i in arr) {
					var offerVariant = (arr[i][attributeName]);					
					if (offerVariant == attributeValue) {
						attributeName = i;
						if ( ) { // если все ключи-значения в элементах .selected содержатся в attributeName, тут ступор
							$.getJSON(url + attributeName, function (data) {
								alert(data.productName);
							});
						}
						else {
							alert ('такой комбинации нет')
						}
					}		
				}

			});
		});

Comments

[Kovalsky]

Отлично, будем дальше обсасывать ваши задачки.

Вот там где у вас ступор сформулируйте условие. Какое оно получилось?

Кстати в коде у вас фигурирует селектор '.attributename', в вашей разметке нет такого класса.

UPD: вот я сделал пример по мотивам вашего творчества, показывайте какая задача.

[Nik1712]

Никита Полевой: условие такое ,
числовой ключ выбирается исходя из выбранного атрибута цвета data-attribute-name="color"
у этого числового ключа, скажем "10002" (если цвет черный)
{
"color": "black",
"type": "34",
"size": "small"
},
внутри должны быть ключи, равные data-attribute-name остальных выбранных атрибутов и их значения, равные data-attribute-value . если все ок, то true, если не ок - false

[Kovalsky]

Nik1712: ну и проверьте есть ли эти значения в выбранных элементах.

[Nik1712]

Никита Полевой: в этом и вопрос, как сверить фрагмент массива с атрибутами всех .selected элементов
наверное через every/some?

[Kovalsky]

Nik1712: в вашем коде есть пример цикла, чем он не устраивает?

[Nik1712]

Никита Полевой: по идее здесь надо создать объект ключ:значение из всех selected атрибутов (они могут быть любые и их может быть хоть 10) и сравнить его с фрагментом массива для выбранного по клику id товара. Как создать этот объект из атрибутов и сравнить я и не понимаю. Читаю про массивы, гуглю и пытаюсь разобраться

[Kovalsky]

Nik1712: ну не обязательно прям объект создавать, достаточно пройтись по selected и сравнить атрибуты. Но можно и объект. Вы знаете как создаются объекты, знаете как присваиваются свойства объекта? Если да, то в чем сложность - у вас есть нужные элементы, берёте из них нужную информацию и создаёте объект с нужными свойствами. В каком пункте проблема - 1) взять нужные элементы, 2) взять нужную информацию из них, или 3) создать объект?

[Nik1712]

проблема в 1 и 2
3 наверное вот так
var filterSelected = {};

как взять и вставить сюда все значения из .selected в нужном виде и сравнить с фрагментом массива, я не знаю

[Kovalsky]

Nik1712: и всё это уже реализовано в вашем коде - вы сами на элементы вешаете соответствующий класс, значит и выбрать нужные элементы не будет проблемой. Атрибуты вы тоже в коде как-то достаёте, посмотрите сами.

[Nik1712]

Никита Полевой: изначально их отдает сервер с таким классом, т.е. по загрузке. и по клику они могут меняться

[Kovalsky]

Nik1712: хххорошо.

Answer 1

[Stalker_RED]

Первые три строчки можно переписать так:

var attributeName = $(this).data('attribute-name');
var attributeValue = $(this).data('attribute-value');
$(this).addClass('selected').siblings().removeClass('selected');

// если все ключи-значения в элементах .selected содержатся в attributeName, тут ступор

У меня тоже ступор, не могли бы вы подробнее расписать что именно нужно проверить

Comments

[Nik1712]

числовой ключ выбирается исходя из выбранного по клику атрибута (например цвета) data-attribute-name="color"
у этого числового ключа, скажем "10002" (если цвет черный)
{
"color": "black",
"type": "34",
"size": "small"
},
внутри должны быть ключи, равные data-attribute-name остальных выбранных атрибутов и их значения, равные data-attribute-value . если все ок, то true, если не ок - false

[Stalker_RED]

Nik1712:
Переписал так:

// собираем текущие значения
  var current = {
    type: $('.selected[data-attribute-name="type"]').data('attribute-value'),
    color: $('.selected[data-attribute-name="color"]').data('attribute-value'),
    size: $('.selected[data-attribute-name="size"]').data('attribute-value')
  }
  
  // ищем их в списке образцовых
  var id = Object.keys(checklist).find(itemId => {
    var item = checklist[itemId]
    return (current.type === parseInt(item.type)
            && current.color === item.color
            && current.size === item.size
           )
  })

https://jsfiddle.net/7dek9qou/
Работающие комбинации: 1-1-1 и 1-2-2

[Nik1712]

Stalker_RED: спасибо, но проблема в том, что вместо type color и size могут быть любые другие названия атрибутов и должно быть без привязки к имени конкретного атрибута. По идее надо собрать объект из атрибутов всех selected ссылок такого же вида ключ:значение и сравнить с фрагментом массива. Но как именно это сделать пока не могу разобраться

[Stalker_RED]

Nik1712: html структура должна быть именно такая? Оно конечно можно и так, но неудобно же.

[Nik1712]

Stalker_RED: да, к сожалению - именно такая

[Stalker_RED]

Nik1712: количество ключей в списке для сравнения и в html всегда совпадает или нет?
Если нет, то где их больше?

[Nik1712]

Stalker_RED: количество ключей всегда одинаково, но в arr для некоторых id могут быть пустые значения ключей

[Stalker_RED]

Nik1712: и что в таких случаях, считать за совпадение или нет?

[Nik1712]

Stalker_RED: когда все пары значений атрибутов из всех выбранных элементов (.selected)
data-attribute-name/data-attribute-value

аналогичны всем ключам/значениям для какого-то id
"1002": {
"key":"value"
}
если такой id есть - он нам нужен, если нет - то выводим сообщение об ошибке
надеюсь, не очень косноязычно

[Stalker_RED]

Nik1712: Как-то так?

// собираем текущие значения
  var current = {};
  $('a.selected').each(function(){
    var elem = $(this)
    current[elem.data('attribute-name')] = elem.data('attribute-value')+'';
  })
  // ищем совпадения
  var id = Object.keys(checklist).find(itemId =>
    Object.keys(current).every(propName =>
      current[propName] === checklist[itemId][propName]
  ))

https://jsfiddle.net/c8fnn38g/

[Nik1712]

Stalker_RED: да. Спасибо огромное! проблема была именно в том, чтобы создать правильно объект и сравнить через every. Теперь вроде разобрался