Как выгрузить ключи из JSON в атрибуты блоков html?

Question

[igix]

Добрый.

Есть JSON такого типа:

{
	"11" : {
		"name" : "One",
		"cost" : 10000,
		"description" : "Bla"
	},
	"22" : {
		"name" : "Two",
		"cost" : 11000,
		"description" : "Bla Bla"
	},
	"33" : {
		"name" : "Three",
		"cost" : 12000,
		"description" : "Bla Bla Bla"
	}

}

Как организовать выгрузку ключей (11, 22, 33) циклом в атрибуты блоков с классом item:

<div class="box">
	<div class="item"></div>
</div>
<div class="box">
	<div class="item"></div>
</div>
<div class="box">
	<div class="item"></div>
</div>

Чтобы в итоге получить что-то типа того:

<div class="box">
	<div class="item" data-id="11"></div>
</div>
<div class="box">
	<div class="item" data-id="22"></div>
</div>
<div class="box">
	<div class="item" data-id="33"></div>
</div>

Спасибо.

Answer 1

[Слава Бородулин]

const myJson = `{
      "11": {
        "name": "One",
        "cost": 10000,
        "description": "Bla"
      },
      "22": {
        "name": "Two",
        "cost": 11000,
        "description": "Bla Bla"
      },
      "33": {
        "name": "Three",
        "cost": 12000,
        "description": "Bla Bla Bla"
      }

    }`;

    const keys = Object.keys(JSON.parse(myJson)); //массив ключей

    $('.box .item').each((index, item) => {
      $(item).attr('data-id', keys[index]);
    });

Comments

[igix]

Спасибо. Все работает.

А если в JSON допустим 6 ключей.

{
	"11" : {
		"name" : "One",
		"cost" : 10000,
		"description" : "Bla"
	},
	"22" : {
		"name" : "Two",
		"cost" : 11000,
		"description" : "Bla Bla"
	},
	"33" : {
		"name" : "Three",
		"cost" : 12000,
		"description" : "Bla Bla Bla"
	},
	"44" : {
		"name" : "Four",
		"cost" : 13000,
		"description" : "Bla"
	},
	"55" : {
		"name" : "Five",
		"cost" : 14000,
		"description" : "Bla Bla"
	},
	"66" : {
		"name" : "Six",
		"cost" : 15000,
		"description" : "Bla Bla Bla"
	}

}

Как выгрузить первые 3 в один блок с классом .box, а оставшиеся 3 в блок с классом .box-1 ? Чтобы получилось что-то типа того:

<div class="box">
		<div class="item" data-id="11"></div>
		<div class="item" data-id="22"></div>
		<div class="item" data-id="33"></div>
	</div>

	<div class="box-1">
		<div class="item" data-id="44"></div>
		<div class="item" data-id="55"></div>
		<div class="item" data-id="66"></div>
	</div>

[Слава Бородулин]

Все тоже самое в принципе, меняется условие выборки элементов

const keys = Object.keys(JSON.parse(myJson)); //массив ключей

    $('.item').each((index, item) => {  // в этой строке изменение, при выборке не привязываемся к конкретному боксу
      $(item).attr('data-id', keys[index]);
    });

[igix]

Я так делал. В принципе устраивает.

Сейчас хотел по аналогии сделать уже не для ключей, а для значений. Т.е. блокам .item присвоить атрибуты уже не ключей (11,22 и т.д.), а допустим значений из JSON "name":

<div class="box">
    <div class="item" data-name="One"></div>
    <div class="item" data-name="Two"></div>
    <div class="item" data-name="Three"></div>
  </div>

Помогите одолеть :)

Answer 2

[Петя Персианов]

keysVal = Object.keys(object);
for(i in keysVal){
    $(".item").eq(i).prop("data-id", keysVal[i]) 
}

Comments

[Павел Корнилов]

Только jQ тут зачем?

[Петя Персианов]

KorniloFF, Мне так удобно

[igix]

console.log(keysVal);
Array [ "11", "22", "33" ]

$(".item").eq(i).prop("data-id") = keysVal[i];
ReferenceError: invalid assignment left-hand side

[Петя Персианов]

igix, упс, не проснулся...
$(".item").eq(i).prop("data-id", keysVal[i])
Спасибо!

[Павел Корнилов]

Вася Петячкин, я ниже на нативе привел.

[igix]

Странно, ошибок нет, консоль выводит массив, а в инспекторе чисто.

Answer 3

[Павел Корнилов]

var json= {.....};
[].map.call(document.querySelectorAll('.item'), function(i, ind) {
	i.setAttribute("data-id", Object.keys(json)[ind]);
});

Answer 4

[Александр Кузнецов]

Самый простой способ - это обойти JSON:

var json =  { /*тут ваш JSON*/ };
var index = 0; 
var root = getRoot() // функция, отдающая блок, в котором есть ваш HTML, объект jQuery
for (var p in json) { 
    if (json.hasOwnProperty(p)) {
        //Получить див по индексу внутри контейнера, объект jQuery
        var div = getDivByIndexFromRoot(root, index); 
        div.data('id', p);
    }
}

getRoot, getDivByIndexFromRoot - выдуманные функции, поведение которых описано в комментариях.

Возможно, есть и другие, более элегантные решения.