Печатный ключ и значения из объекта Javascript дублируются

Question

У меня есть JSON объект в следующем формате

var myarray = {
  "2020-01-20": ["08:00 - 09:00", "09:00 - 10:00"],
  "2020-01-21": ["08:00 - 09:00"]
};

Я хочу напечатать список с ключом, следующим за каждым значением списка. Ожидаемый результат:

2020-01-20 | 08:00 - 09:00
2020-01-20 | 09:00 - 10:00
2020-01-21 | 08:00 - 09:00

Я пытаюсь сделать это с помощью следующего кода, но у меня неожиданное поведение.

var entries = '';
$.each(myarray, function(key, value) {
  for (var i = 0; i < value.length; i++) {
    entries += entries + '<div>' + key + ' | ' + value[i] + '</div>';
  }
});
$('#entries').html(entries);

Где результат

2020-01-20 | 08:00 - 09:00
2020-01-20 | 08:00 - 09:00
2020-01-20 | 09:00 - 10:00
2020-01-20 | 08:00 - 09:00
2020-01-20 | 08:00 - 09:00
2020-01-20 | 09:00 - 10:00
2020-01-21 | 08:00 - 09:00

Вы можете найти jsfiddle здесь с воспроизводимым примером

Answer 1

Следующая строка внутри цикла for:

entries += entries + '<div>' + key + ' | ' + value[i] + '</div>';

должна быть:

entries += '<div>' + key + ' | ' + value[i] + '</div>';

Это явно опечатка в написании кода с исправлением, которое даст ваш пример скрипки:

2020-01-20 | 08:00 - 09:00
2020-01-20 | 09:00 - 10:00
2020-01-21 | 08:00 - 09:00

Надеюсь, это поможет.

Answer 2

Вы используете два типа сложения в одной строке, поэтому вы получаете этот вывод. Если вы замените += на = или удалите entries + из этой строки, вы получите желаемый результат.

Ниже приведены два возможных исправления:

entries = entries + '<div>' + key + ' | ' + value[i] + '</div>';

и

entries += '<div>' + key + ' | ' + value[i] + '</div>';

Answer 3

Вы можете сделать это

entries = entries + '<div>' + key + ' | ' + value[i] + '</div>'

или

entries += '<div>' + key + ' | ' + value[i] + '</div>'

Answer 4

Это будет работать для вас.

var entries = '';
$.each(myarray, function(key, value) {
  for (var i = 0; i < value.length; i++) {
    entries += '<div>' + key + ' | ' + value[i] + '</div>';
  }
});
$('#entries').html(entries);

Answer 5

Замените эту строку:

entries += entries + '<div>' + key + ' | ' + value[i] + '</div>';

На это:

entries += '<div>' + key + ' | ' + value[i] + '</div>';

Фактически вы печатаете записи дважды.