Добавить контент из объекта в JQUERY -CONFIRM

Question

У меня есть объект, и я хочу добавить сведения о нем в содержимое JQUERY -CONFIRM .

Это мой код:

const obj = {
  'alphabets':['abc', 'xyz', 'pqr'],
  'colors':['red', 'blue', 'purple']
}

$.dialog({
	title: 'Test',
	columnClass: 'col-md-6 col-md-offset-6',
	content: function() {
		for (let key in obj) {
			return `<h3 class='float-left'>${key}</h3>
						<ul class='float-left'>
							<li class='float-left'>${obj[key]}</li>
						</ul>
						`;
		}
	},
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>

Почему я получаю только первую пару "ключ-значение" в моем контенте, а также почему они не указаны в списке, а отображаются как разделенные запятыми значения?

Answer 1

Вы l oop через ключи объекта, но всегда возвращаетесь на первой итерации.

Вы можете использовать .map для сопоставления всех пар ключ / значение obj с HTML строк и .join их:

colors и alphabets отображались как значения, разделенные запятыми, потому что вы поместили весь массив в один элемент <li>: <li class='float-left'>${obj[key]}</li>. Чтобы создать несколько элементов <li>, вам необходимо сопоставить каждый элемент массива с новым <li>:

const list = obj[key].map(li => `<li class='float-left'>${li}</li>`).join('');

const obj = {
  'alphabets':['abc', 'xyz', 'pqr'],
  'colors':['red', 'blue', 'purple']
}

const mapToHtml = key => {
    const list = obj[key].map(li => `<li class='float-left'>${li}</li>`).join('');
    return `<h3 class='float-left'>${key}</h3><ul class='float-left'>${list}</ul>`;
}

$.dialog({
	title: 'Test',
	columnClass: 'col-md-6 col-md-offset-6',
	content: () => Object.keys(obj).map(mapToHtml).join('')
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.4/jquery-confirm.min.js"></script>