Convert Json response object to string using JQuery

Question

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.

@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
– Kavya Shree, Commented Feb 7, 2017 at 7:21

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-07 07:52:59Z

2

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>

edited Feb 7, 2017 at 7:52

answered Feb 7, 2017 at 7:20

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Kavya Shree Over a year ago

Object {outputQty: "2", orderSummaries: Array[0], categoryName: "test", itemId: 1, recipes: Array[0]…}.. Im getting like this. How can I get each value from each row

Mihai Alexandru-Ionut Over a year ago

You can access elements like this: value.outputQty, value.categoryName.

Alejalapeno Over a year ago

value.categoryName[0] first object in array is zero indexed.

Alejalapeno Over a year ago

Your categoryName is a string value not an array. For clarification "list" is usually synonymous with array. value.categoryName.split(" ") will split a string into an array by its spaces. value.categoryName.split(" ")[0] would be the first value split into your array.

Frogger Over a year ago

If you just want the first objects categoryName just use data.data[0].categoryName

|

wayofthefuture · Accepted Answer · 2017-02-07 07:38:21Z

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);
       }
});

score 1 · Accepted Answer · 2017-02-07 08:03:43Z

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>

Collectives™ on Stack Overflow

Convert Json response object to string using JQuery

3 Answers 3

13 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

Comments

Comments

Related