Question

我正在做一个与JSON和JavaScript相关的练习。但是，我只是无法弄清楚我的语法有什么问题。它应该在HTML中显示有序列表部分的链接，但我只有H2标签。

以下是语法：

  <!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="utf-8"/>
  <title>Javascript and jason</title>
  </head>
  <body>
  <h2>Links</h2>
  <ol id="links">
  </ol>
  <script>

  var info = {
    "full_name":"Ray Villaobos",
    "title" : "Staff Author",
    "links" :[
        {"blog":"http://iviewsource.com"},
        {"facebook":"http://facebook.com/iviewsource"},
        {"youtube":"http://www.youtube.com"},
        {"podcast":"http://feeds.feedburer.com/authoredcontent"},
        {"twitter":"http://twitter.com/planetoftheweb"}
    ]

   };

var output = '';

for (var i=0; i <=info.links.length; i++) {

    for (key in info.links[i]){

        if (info.links[i].hasOwnProperty(key))
        {
            output +='<li>' +
            '<a href ="' + info.links[i][key]+
            '">' +'</a>' + 
            '<li>';
        }

       }
    }
    var update = document.getElementById('links');
    update.innerHtml = output;

 </script>
</body>
</html>

Answer 1

你没有看到任何东西，因为你有拼写错误。请记住，JavaScript区分大小写。

应该是：

update.innerHTML = output;

使用大写HTML。

但最好像这样使用appendChild：

var output = '';
var update = document.getElementById('links');
for (var i = 0; i <= info.links.length; i++) {

    for (key in info.links[i]) {

        if (info.links[i].hasOwnProperty(key)) {
            var li = document.createElement('li');
            var a = document.createElement('a');
            a.setAttribute('href', info.links[i][key]);
            a.text = key;
            li.appendChild(a);
            update.appendChild(li);
        }
    }
}

请参阅Fiddle

Answer 2

三个问题：

您没有关闭li元素;您还有另一个<li>，其结尾为</li>。
您没有在<{1}}标记内添加任何。我在这里包含<a>作为链接文字。
key应为innerHtml。

innerHTML

var info = {
  "full_name": "Ray Villaobos",
  "title": "Staff Author",
  "links": [{
    "blog": "http://iviewsource.com"
  }, {
    "facebook": "http://facebook.com/iviewsource"
  }, {
    "youtube": "http://www.youtube.com"
  }, {
    "podcast": "http://feeds.feedburer.com/authoredcontent"
  }, {
    "twitter": "http://twitter.com/planetoftheweb"
  }]

};

var output = '';

for (var i = 0; i <= info.links.length; i++) {

  for (key in info.links[i]) {

    if (info.links[i].hasOwnProperty(key)) {
      output += '<li>' +
        '<a href="' + info.links[i][key] +
        '">' + key + '</a>' +
        '</li>';
    }

  }
}
var update = document.getElementById('links');
update.innerHTML = output;

Javascript / JSON输出不显示

2 个答案: