将对象中的内容添加到 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

您遍历对象键，但总是在第一次迭代时 return。

您可以使用 .map to map all the obj key/value pairs to the HTML strings and then .join 他们：

Object.keys(obj).map(mapToHtml).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>

将对象中的内容添加到 JQUERY-CONFIRM

Add content from object to JQUERY-CONFIRM

javascript

jquery

object

ecmascript-6

jquery-confirm