来自 Javascript 对象的打印键和值重复

Question

I have a JSON object in the following format

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

What I want to do is to print a list with the key following each value of the list. Expected outcome is

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

I try to do this with the following code, but I have an unexpected behaviour.

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);

Where the outcome is

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

You can find a jsfiddle here with a reproducable example

Answer 1

The following line inside the for cycle:

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

should be:

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

It's clearly a typo in writing the code, with the correction your fiddle example will give:

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

Hope it helps.

Answer 2

Replace this line:

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

With this:

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

You actually print the entries twice.

Answer 3

This will work for you.

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 4

You could do like this

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

or

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

Answer 5

You are using two types of addition assignment in a single line, which is why you are getting that output. If you replace += with = or remove entries + from that line, you will get your desired output.

The two possible corrections are below:

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

and

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