CODEWITHSUNDEEP
javascriptjqueryjson
Klaus
Klaus

Reputation: 41

Jquery : how to add <li> in an existing <ul> with json data

I have code that looks like this:

<div id="tags">
  <ul>
  </ul>
</div>

and I'd like to append some items to the list using json data

 $.getJSON("data.json", function (data) {
            var html = '';
            var len = data.tags.length;
            for (var i = 0; i < len; i++) {
                html += '<li><a href="#">' + data.tags[i].tag + '</a></li>';
            }

            $("#tags ul").append(html);


        })
        .done(function () {
            console.log("second success");
           })
       .fail(function(err){console.log(err)});

but nothing happens , where is my mistake?

Upvotes: 2

Views: 3837

Answers (3)

faby
faby

Reputation: 7558

working fiddle with test json

http://jsfiddle.net/BWM2E/1/

$.getJSON("http://query.yahooapis.com/v1/public/yql?q=select%20%2a%20from%20yahoo.finance.quotes%20WHERE%20symbol%3D%27WRC%27&format=json&diagnostics=true&env=store://datatables.org/alltableswithkeys&callback", function (data) {

    var html = '';
            var len = data.query.count;

    for (var i = 0; i < len; i++) {
                html += '<li><a href="#">' + data.query.created + '</a></li>';
            }

            $("#tags ul").append(html);


        })


        .done(function () {
            console.log("second success");
           })
       .fail(function(err){console.log(err)});

in for loop I print always created property because there is only one query element

the part of the json that I have treated is the following

{"query":{"count":1,"created":"2014-05-26T22:23:03Z"}}

in your case the problem is the url of json that make a redirect.

test it in this (then click on "make a request") site and see this message error that explain you the problem

We weren't able to successfully make a request to http://myjtest.altervista.org/tagcloud/data.json.

This is likely because of a Cross-site HTTP request and your server not having the appropriate Access-Control-Allow-Origin and Access-Control-Allow-Methods headers.

Upvotes: 1

Nitish Dhar
Nitish Dhar

Reputation: 2312

Your Approach

Your code will work fine as long as the JSON structure in your data.json is in the following format - 

{
"tags": [
    {
        "tag": "Tag1"
    },
    {
        "tag": "Tag2"
    },
    {
        "tag": "Tag3"
    },
    {
        "tag": "Tag4"
    }
]
}

Suggested Approach

If your JSON is in this structure - 

{
"tags": [
    "Tag1",
    "Tag2",
    "Tag3",
    "Tag4"
]
}

The javascript to make it work would be - 

$(document).ready(function(){
    $.getJSON( "data.json", function( data ) {
        var items = '';
        $.each( data.tags, function( key, val ) {
            items += '<li id="' + key + '"><a href="#">' + val + '</a></li>';
        });
        $("#tags ul").append(items);
    }).done(function () {
        console.log("Success");
    }).fail(function(err){
        console.log(err)
    });
});

This will generate the following HTML in your DOM - 

<div id="tags">
    <ul>
        <li id="0"><a href="#">Tag1</a></li>
        <li id="1"><a href="#">Tag2</a></li>
        <li id="2"><a href="#">Tag3</a></li>
        <li id="3"><a href="#">Tag4</a></li>
    </ul>
</div>

Upvotes: 6

Mykola
Mykola

Reputation: 123

Looks like your json file is invalid.
Maybe you use single quotes instead of double quotes or something else. Check your data.json file.
According to your js code, your file data.json should be like this:

{
    "tags":[
        {"tag":"name1"},
        {"tag":"name2"},
        {"tag":"name3"}
    ]
}

Upvotes: 0

Related Questions