Below is my output which i am getting from my web service but i want to create li tag from this:

{"d":[{"name":"ttt","url":"bbbb"},{"name":"uuu","url":"ppp"}]}

How to generate li tag from this above output??

I want li tag like this:

<li><a href="bbb" class="mylink">ttt</li>
<li><a href="uuu" class="mylink">ppp</li>

Below is my output which i am getting from my web service but i want to create li tag from this:

{"d":[{"name":"ttt","url":"bbbb"},{"name":"uuu","url":"ppp"}]}

How to generate li tag from this above output??

I want li tag like this:

<li><a href="bbb" class="mylink">ttt</li>
<li><a href="uuu" class="mylink">ppp</li>

• javascript
• jquery
• c3.js

• @YeldarKurmangaliyev:see updated question – I Love Stackoverflow Commented Dec 23, 2015 at 7:32

5 Answers 5

You should try this.

var obj = {
  "d": [{
    "name": "ttt",
    "url": "bbbb"
  }, {
    "name": "uuu",
    "url": "ppp"
  }]
};

$(obj.d).each(function(i,item) {
  $("<li/>").html($("<a>").attr("href",item.url).text(item.name)).appendTo('body');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Just use jQuery .each() to iterate through your object, and build your li using jQuery:

var obj = {
  "d": [{
    "name": "ttt",
    "url": "bbbb"
  }, {
    "name": "uuu",
    "url": "ppp"
  }]
};

$(obj.d).each(function() {
  var $a = $("<a/>").addClass('mylink').text(this.name).attr('href', this.url);
  $("<li/>").append($a).appendTo('body');
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Please have a look at this approach:

var data = {"d":[{"name":"ttt","url":"bbbb"},{"name":"uuu","url":"ppp"}]};
$(document).ready(function(){
  var arrData = data.d;
  
  $.each(arrData, function( index, value ) {
   $("ul").append("<li><a href='"+value.url+"' class='mylink'>"+value.name+"</a></li>");
  });
  
  
});  

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div>
  <ul>
  </ul>  
</div>  

A solution in plain Javascript - step by step.

var object = { "d": [{ "name": "ttt", "url": "bbbb" }, { "name": "uuu", "url": "ppp" }] };

function generate(array) {
    var ul = document.createElement('ul');
    array.forEach(function (a) {
        var li = document.createElement('li'),
            anchor = document.createElement('a');
        anchor.href = a.url;
        anchor.text = a.name;
        li.appendChild(anchor);
        ul.appendChild(li);
    });
    return ul;
}

document.body.appendChild(generate(object.d));

You can do it without using jQuery.Also there is no data[i]['anchor'].I guess here you are looking for the url key.

HTML

<div id="wrapper"></div>

JS

(function(){
var x = {  
   "d":[  
      {  
         "name":"ttt",
         "url":"bbbb"
      },
      {  
         "name":"uuu",
         "url":"ppp"
      }
   ]
}
var o = x['d'];
var liElem="";
for(var a =0;a<o.length;a++){
liElem += '<li class="demoClass"><a href ="'+o[a].url+'">'+o[a].name+'</a></li>'
}
document.getElementById('wrapper').innerHTML=liElem
}())

WORKING MODEL

Hope this will be useful