This is the JSON response getting from webservice URL . JSON:

{
   "data":[
      {
         "outputQty":"2",
         "orderSummaries":[],
         "categoryName":"test",
         "itemId":1,
         "recipes":[],
         "name":"Laddu"
      },
      {
         "outputQty":"2",
         "orderSummaries":[],
         "categoryName":"Badam Pista Mundiri",
         "itemId":2,
         "recipes":[],
         "name":"Barpi"
      }
   ]
}

I tried to get JSON values in html page .So that I tried as like below:

$.ajax({  
       type: "GET",  
       url: "",  
       dataType: "json",  
       success: function(response) {
         $.each(response, function(idx, obj) {
  console.log(obj);
});
    }
       });  

or

 $.getJSON("", function(data){
    $.each(data, function (index, value) {
        console.log(value);
    });
});

Both way returns object only I can't get string values.Please anyone help me to get out this issue.Thanks in advance.

This is the JSON response getting from webservice URL . JSON:

{
   "data":[
      {
         "outputQty":"2",
         "orderSummaries":[],
         "categoryName":"test",
         "itemId":1,
         "recipes":[],
         "name":"Laddu"
      },
      {
         "outputQty":"2",
         "orderSummaries":[],
         "categoryName":"Badam Pista Mundiri",
         "itemId":2,
         "recipes":[],
         "name":"Barpi"
      }
   ]
}

I tried to get JSON values in html page .So that I tried as like below:

$.ajax({  
       type: "GET",  
       url: "http://tomcatworkbench./Catering2/secured/getAllItems",  
       dataType: "json",  
       success: function(response) {
         $.each(response, function(idx, obj) {
  console.log(obj);
});
    }
       });  

or

 $.getJSON("http://tomcatworkbench./Catering2/secured/getAllItems", function(data){
    $.each(data, function (index, value) {
        console.log(value);
    });
});

Both way returns object only I can't get string values.Please anyone help me to get out this issue.Thanks in advance.

• javascript
• jquery
• json
• ajax

• use JSON.stringify(response) – ricky Commented Feb 7, 2017 at 7:15
• @ricky I got output with all values.But how can I get value from each row and each datatype.Do u have any sample code – Kavya Shree Commented Feb 7, 2017 at 7:21
• @KavyaShree, please take a look at my answer. – Mihai Alexandru-Ionut Commented Feb 7, 2017 at 7:22

3 Answers 3

You have to get data.data object.

$.getJSON("http://tomcatworkbench./Catering2/secured/getAllItems", function(data){
    $.each(data.data, function (index, value) {
       console.log(value);
    });
});

var data={
   "data":[
      {
         "outputQty":"2",
         "orderSummaries":[],
         "categoryName":"test",
         "itemId":1,
         "recipes":[],
         "name":"Laddu"
      },
      {
         "outputQty":"2",
         "orderSummaries":[],
         "categoryName":"Badam Pista Mundiri",
         "itemId":2,
         "recipes":[],
         "name":"Barpi"
      }
   ]
}
$.each(data.data, function (index, value) {
    var tr='<tr>';
    tr+='<td>'+value.outputQty+'</td>'+
        '<td>'+value.categoryName+'</td>'+
      '<td>'+value.itemId+'</td>'+
      '<td>'+value.name+'</td>'+
      '</tr>';
    $('table').append(tr);
});

td{
   border:1px solid grey;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
       <td>OutputQuantity</td>
       <td>CategoryName</td>
       <td>ItemID</td>
       <td>Name</td>
    </tr>
    <tr>
        
    </tr>
</table>

just enumerate response.data

$.ajax({  
       type: "GET",  
       url: "http://tomcatworkbench./Catering2/secured/getAllItems",  
       dataType: "json",  
       success: function(response) {
           response.data.forEach(function(item) {
               console.log(item.categoryName);
           });

           var firstItem = response.data[0];                                                 
           console.log(firstItem.categoryName);

           var allCategoryNames = response.data.map(function(item) {
               return item.categoryName;
           });
           console.log(allCategoryNames);

           var allCategoryFirstNames = response.data.map(function(item) {
               return item.categoryName.split(' ')[0];
           });
           console.log(allCategoryFirstNames);
       }
});

You can try the following example.

var response = {"data":[{"outputQty":"2","orderSummaries":[],"categoryName":"test","itemId":1,"recipes":[],"name":"Laddu"},{"outputQty":"2","orderSummaries":[],"categoryName":"Badam Pista Mundiri","itemId":2,"recipes":[],"name":"Barpi"}]};

var data = response.data;
$.each(data,function(i,v){
for(var key in v){
  if(key==="categoryName"){
  console.log(i+". "+key+": "+v[key]);
  }
 }
});

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