Как правильно вывести объект в html?

Question

[Иван Симонов]

Здравствуйте
Мой код - https://jsfiddle.net/9e42wj5z/. Это при условии, если есть соотв. элемент массива.

Проблема в следующем, если например элемент массива - 1 (или любой другой элемент) отсутствует, тогда происходит смещение https://jsfiddle.net/2kx1jsbp/, а хотелось бы вывести 0, если елемент массива отсутсвует.
Подскажите, как это реализовать?

Answer 1

[Сергей c0re]

Во-первых, вы непонятно излагаете свои мысли:

и как сравнить значение, если например 0 - соотв. этому .item добавляем класс

значит ли это что класс необходимо выставлять элементу в котором значение равно искомому, в данном случае 0 ?

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

0: 1,
1: 4,
2: 2,
3: 4,
4: 4,
5: 2,

после разбивки split'ом
str.split(', ')[i]
в count вы присваете ПАРУ значение: количество !
и это сравниваете с 0 ???
эту пару необходимо еще раз разбить и взять либо ЗНАЧЕНИЕ, либо КОЛИЧЕСТВО, смотря что вам надо??

ну и

если например 0

то почему у вас стоит условие < 0 ???

for (let i = 0; i < item.length; i++) {
	let pair = str.split(', ')[i];
  if (pair.split(': ')[0] == 0) {
    item[i].classList.add('zero');
  }
  item[i].textContent = pair;
}

PS: а если количество элементов в массиве изменится??
может стоит добавлять элементы динамически?
см. Node.appendChild()

UPDATE:


UPDATE 2:
с добавлением класса:

Comments

[Иван Симонов]

Спасибо. Поправил вопрос

[Сергей c0re]

Иван Симонов, какая вообще связь между календарем, который вы теперь вставили и массивом:

let arr = [2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6, 2, 3, 4, 5, 6, 7, 2, 3, 4, 5, 6];

??
дни недели - пнд - 1, втн -2 .... вск - 7 ???

и убрали значение: количество из строк str
str += `${result[key]}, `;

поэтому как теперь идентифицировать какое количество чему соответствует??

[Иван Симонов]

Сергей, Пн - элемент массива со значением 1, Вт - элемент массива со значением 2 и т.д.

[Сергей c0re]

Иван Симонов, обновил ответ.

[Иван Симонов]

Сергей, Благодарю

Answer 2

[Шохрух Шаймардонов]

как сравнить значение, если например 0 - соотв. этому значению добавляем класс

Не понятно что вы хотите

if (count < 0) {
    item[i].classList.add('zero');
  }

Вы сравниваете значение на то, что оно меньше 0. Но у вас нет таких значений. Ковыряйте тут

Comments

[Шохрух Шаймардонов]

Иван Симонов, вам стоит полностью переформулировать вопрос. Ибо уже 2 человека пытаются ответить, и минимум 1 из них не понял чего вы вообще хотите.

[Иван Симонов]

Шохрух Шаймардонов, Вы правы. поправил вопрос

Answer 3

[M0OL0L]

Вот держи!

let arr = [1, 3, 4, 2, 1, 3, 4, 0, 5, 1, 3, 4, 2, 1, 3, 4, 5];

let result = {};

for (let i = 0; i < arr.length; ++i) {
  let a = arr[i];
  if (result[a] != undefined)
    ++result[a];
  else
    result[a] = 1;
}

function Innertext (x){
	/*ищем тэг куда будем вставлять создаваемые дивы*/
	const cont = document.querySelector('.content');
	/*создаем дивы и в свойство элемента innerHTML пишем результат*/
	for(var property_value in x){
		let block = document.createElement("div");
		block.className = "block";
		block.innerHTML = property_value + ' : ' + x[property_value];
		cont.appendChild(block);
	}
}

Innertext(result);