CODEWITHSUNDEEP
javascriptjqueryjsonajax
Kavya Shree
Kavya Shree

Reputation: 1032

Convert Json response object to string using JQuery

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.com/Catering2/secured/getAllItems",  
       dataType: "json",  
       success: function(response) {
         $.each(response, function(idx, obj) {
  console.log(obj);
});
    }
       });

or

 $.getJSON("http://tomcatworkbench.com/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.

Upvotes: 3

Views: 4905

Answers (3)

user2560539
user2560539

Reputation:

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.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

You have to get data.data object.

$.getJSON("http://tomcatworkbench.com/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.com/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>

Upvotes: 2

wayofthefuture
wayofthefuture

Reputation: 9405

just enumerate response.data

$.ajax({  
       type: "GET",  
       url: "http://tomcatworkbench.com/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);
       }
});

Upvotes: 2

Related Questions