Javascript/JSON output doesn't show

Question

I am doing an exercise related with JSON and JavaScript. However, I just could not figure out that what's wrong with my syntax. It should show the links on the ordered list part in HTML, but I got only H2 tag.

Here is the syntax:

  <!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>

No any errors. In fact, It should show as: Links as a title and then the links as ordered list, I just wondered where are those links, from inspect elements, the ol part has nothing — seit
– seit, Commented Feb 27, 2015 at 15:56
In addition to the answer from @putvande, you're also not placing any text inside the <a> tag. — soulprovidr
– soulprovidr, Commented Feb 27, 2015 at 15:58

putvande · Accepted Answer · 2015-02-27 15:57:55Z

2

You don't see anything because you have a typo. Remember that JavaScript is case-sensitive.

It should be :

update.innerHTML = output;

So with uppercase HTML.

But it might be better to use appendChild like so:

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);
        }
    }
}

See Fiddle

answered Feb 27, 2015 at 15:57

putvande

15.3k3 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

seit Over a year ago

Hi, tks! I corrected that. But do you know what I got then, it shows Links as title, then the number from 1 to 10 in 10 rows. After each number, nothing showed?

putvande Over a year ago

That's because you only provided a link for your a tag, but no text.

Paul Roub · Accepted Answer · 2015-02-27 16:02:03Z

0

Three problems:

You're not closing your li elements; you have another <li> where the closing </li> should be.
You're not putting anything inside the <a> tags. I'm including key as the link text here.
innerHtml should be 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;

 <h2>Links</h2>
<ol id="links">
</ol>

answered Feb 27, 2015 at 16:02

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

1 Comment

seit Over a year ago

Many tks! I could not vote you up but many tks. Saved my time. :-)

Collectives™ on Stack Overflow

Javascript/JSON output doesn't show

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related