如何添加<li>至<ul>帶有來自本地存儲的數據元素</ul></li>

Question

所以我正在嘗試創建一個具有唯一值的輸入列表，這些值是從一組對象中獲取的。 但由於某種原因，它只迭代一次並停止。

function loadLayer() {
//Get the object from local storage
var project = JSON.parse(localStorage.getItem('project'));

var projectLayers = project.layers

for (var x = 0; x < projectLayers.length; x++) {
    var x = createLayer(projectLayers[x].name)
    appendLayer(x)
  }
}

所以項目層基本上是一個數組，如[{id=1,name="bob},{id=2,name="kevin"}]

function createLayer(name) {
  var li = document.createElement("li");
  li.className = "list-group-item"
  var x = document.createElement("INPUT")
  x.setAttribute("type", "text")
  x.setAttribute("value", name)
  li.appendChild(x)
  return li
}

function appendLayer(layer) {
  var layerList = document.getElementById("layerList")
  layerList.appendChild(layer)
}

並且 appendlayer 只是將 li 添加到 ul

但是，在我運行程序后，我只有一個

里面有一個帶鮑勃的輸入。 另一個沒有 go 在哪里。 我嘗試打印以查看是否調用了第二個循環，但看起來不像。 我不知道為什么，被困了幾個小時。

Answer 1

就像您被告知的那樣，您需要小心命名變量的方式。 其次，我還建議使用let而不是var 。 因為您可以輕松地覆蓋在其初始 scope 之外使用var聲明的變量。

現在到您的代碼：我對您的代碼進行了一些編輯，尤其是loadLayer function並將兩個名稱附加到列表中：

<script>

    let projectList = [
        {
            id:1,
            name:"bob"
        },
        {
            id:2,
            name:"kevin"
        }
    ]

    function loadLayer() {
        window.localStorage.setItem('project', JSON.stringify(projectList));
        let p = JSON.parse(window.localStorage.getItem('project'));

        for (let i = 0; i < p.length; i++) {

            let projectName = createLayer(p[i].name)
            appendLayer(projectName)

        }
    }


    function createLayer(name) {

        let li = document.createElement("li");
        li.className = "list-group-item"

        let x = document.createElement("INPUT")
        x.setAttribute("type", "text")
        x.setAttribute("value", name)

        li.appendChild(x)
        return li
    }

    function appendLayer(layer) {
        let layerList = document.getElementById("layerList")
        layerList.appendChild(layer)
    }

    loadLayer()
</script>

Answer 2

您將循環中的迭代變量命名為x並且var x = createLayer(projectLayers[x].name)與之沖突，請更改其中之一。