将对象列表打印为 vanilla javascript 中的链接

Posted 2023-05-07

【中文标题】将对象列表打印为 vanilla javascript 中的链接

【英文标题】：printing list of objects as links in vanilla javascript

【发布时间】：2017-12-12 19:04:02

【问题描述】：

我正在尝试使用 vanilla javascript 打印对象列表。在我的循环中，只有最后一项被打印出来。我该如何解决？我尝试将每个 li 附加到一个变量（节点），然后将其附加到我的 ul id，但这不起作用。这是小提琴：

https://codepen.io/anon/pen/LLgZzw?editors=1011

html

<ul id="list"></ul>

JS

let list = document.getElementById('list');

let obj = 
  "codepen": 'www.codepen.io',
  "jsfiddle": 'www.jsfiddle.com',
  "jsbin": 'www.jsbin.com'
;
function printList(obj)
  for(let key in obj)
    console.log(key);
    list.innerHTML = `<li><a href= $obj[key]>$key</a></li>`;
  
  //list.appendChild(li);

printList(obj);

【问题讨论】：

你需要在这里连接你的字符串list.innerHTML += $key ;使用@ 987654326@

感谢@Mr.Alien！

【参考方案1】：

您需要将值连接到 innerHTML。在您的情况下，它始终是将在 innerHTML 中设置的迭代的最后一个值

let list = document.getElementById('list');

let obj = 
  "codepen": 'www.codepen.io',
  "jsfiddle": 'www.jsfiddle.com',
  "jsbin": 'www.jsbin.com'
;

function printList(obj) 
  for (let key in obj) 
    console.log(key);
    //Changed here. added + before ==.It will concat the current value with previous value
    list.innerHTML += `<li><a href= $obj[key]>$key</a></li>`;
  
  //list.appendChild(li);

printList(obj);

<ul id="list"></ul>

【讨论】：

正是我需要的！非常感谢@brk