ordered list; working with javascript and json

Question

I'm a junior web developer and I want to understand what json file does, as I have no idea. So I am following a tutorial from lynda.com

It seems very simple, I want to display the array elements within the variable info, but for some reason, it's adding another count after each item of the array!!! I have checked and compared the code with the tutorial, and it's still appearing wrong.

I have added the code on JSFiddle:

https://jsfiddle.net/meyvz462/

Those are my loops:

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>';
        } // hasOwnProperty ckeck
    } //for each object
} //for each array element

I guess it is what it must be wrong....

Thank you!!!!

Shilly · Accepted Answer · 2015-10-07 08:43:24Z

3

The closing tag is wrong.

output += '<li>' +
                    '<a href = "' + info.links[i][key] +
                    '">' + key + '</a>' +
                    '<li>';

has to be

output += '<li>' +
                '<a href = "' + info.links[i][key] +
                '">' + key + '</a>' +
                '</li>';

answered Oct 7, 2015 at 8:43

Shilly

8,5991 gold badge20 silver badges24 bronze badges

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

1 Comment

eve_mf Over a year ago

thank you, I was looking for an error and I don't know how I haven't seen it!

Fer To · Accepted Answer · 2015-10-07 09:24:38Z

1

You have missed a closing </li> at the end (https://jsbin.com/yasenivege/1/edit?js,console,output):

var info = {
        "full_name" : "Someone Else",
        "title" : "Web Developer",
        "links" : [
        { "blog"     : "http://iviewsource.com" },
                { "facebook" : "http://facebook.com/iviewsource" },
                            { "podcast"  : "http://feeds.feedburner.com/authoredcontent" },
                { "twitter"  : "http://twitter.com/planetoftheweb" },
                { "youtube"  : "http://www.youtube.com/planetoftheweb" }
            ]
        };

            var output = '';

            for (var i = 0; i <= info.links.length; i++) {
              var element = info.links[i];
              for (var key in element) {
                console.log(element[key]);
                if (element.hasOwnProperty(key)) {
                  output += '<li>' +
                          '<a href = "' +element[key] +
                          '">' + key +'</a>'+
                          '</li>';
                }// hasOwnProperty ckeck
              } //for each object
           } //for each array element

           var update = document.getElementById('linksGroup');
    console.log(output)
           update.innerHTML = output;

edited Oct 7, 2015 at 9:24

answered Oct 7, 2015 at 8:48

Fer To

1,52713 silver badges25 bronze badges

2 Comments

eve_mf Over a year ago

thank you, I'm so idiot!!! I've promise I have checked a thousand times and I couldn't see anything.

Fer To Over a year ago

@eve_mf no one is an idiot! :) Also I would recommend using JSBin it allows easier debugging with within the browser :)

Collectives™ on Stack Overflow

ordered list; working with javascript and json

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related