How to print json data on view page coming from Server

Question

I am very new to jquery. I have an api '/categories' which returns me json object of categories. Response is like in this format:

[
{
name: "Laptop deals",
slug: "laptop-deals",
imageURL: "image.jpg",
id: 1
},
{
name: "Fashion deals",
slug: "fashion-deals",
imageURL: "image.jpg",
id: 2
},
{
name: "Mobile deals",
slug: "mobile-deals",
imageURL: "image.jpg",
id: 3
},
{
name: "Home & Kitchen deals",
slug: "home-and-kitchen-deals",
imageURL: "image.jpg",
id: 4
},
]

I want to access this in my html view to display.I have tried this:

<script>
$(document).ready(function(){
$("button").click(function(){
    $.getJSON('/categories',function(data){
      $.each(function(obj,ind,data){
          $('#div').append(obj.slug);
      });
    });
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>

But it doesnt do anything when i click on button. I have tried previous post on stack overflow but nothing works

Refer this [post](http://stackoverflow.com/questions/2342371/jquery-loop-on-json-data-using-each). Either you can also loop using simple for loop. — Amol Bais, Jul 21 '16 at 06:21
I do not know the server code. When i click on 'localhost:1337/categories' it just return the JSON object in the specified form. How do I render it in html? — Devendra Verma, Jul 21 '16 at 06:25

Maths RkBala · Accepted Answer · 2016-07-21T06:28:42.407

2

Change

$.each(function(obj,ind,data){
    $('#div').append(obj.slug);
});

into

$.each(data, function(i, item) {
    $('div').append(data[i].slug);
    //or
    //$('div').append(item.slug);
});

edited Jul 21 '16 at 06:28

answered Jul 21 '16 at 06:21

Maths RkBala

2,207
3
18
21

Yes, it works but i just got only laptop-deals. Why not other slug? – Devendra Verma Jul 21 '16 at 06:34
Yes it works. Actually first time i only got 1 object that's why i was getting only laptop deals. When i am getting all objects then i got all slugs – Devendra Verma Jul 21 '16 at 06:41

How to print json data on view page coming from Server

1 Answers1