CODEWITHSUNDEEP
jqueryjsonajax
Nurul Alam
Nurul Alam

Reputation: 352

json response from ajax display in A table now displaying json isnteal of string

I am trying to make a table using json response from ajax. It currently builds a table but it displays each and every json characters from the response within the td

  success: function (msg) {
        $.each(msg, function (i, item) {
            var tds = "";
            $.each(item, function (i, item) {
                tds += "<td>" + item + "</td>";
            });
            $('#table1').append("<tr>" + tds + "</tr>");
        });
    }

Here is the screenshot of the "table",

I need to convert this to proper table with only values in columns designated for it. Please help .

EDIT

Full code

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<script   src="https://code.jquery.com/jquery-1.7.2.js"   integrity="sha256-FxfqH96M63WENBok78hchTCDxmChGFlo+/lFIPcZPeI="   crossorigin="anonymous"></script>

<script>
$(document).ready(function () {

$("#findClassBtn").click(function () {

displayClass();
return false;

//
function displayClass() {
var instructorInputID = $('#instructorIdText').val();
var instructorInputDate = $('#instructordateText').val();

var str = "{ id: instructorInputID, theDate: instructorInputDate }";
var jsonstr = JSON.stringify(eval("(" + str + ")"));


//send this id to web service
$.ajax({

url: "http://localhost:18324/soapService.asmx/displayClasses",
type: "POST",
dataType: "json",
data: jsonstr,
contentType: "application/json; charset:utf-8",

success: function (msg) {
    var obj = JSON.parse(msg); //testing
    var keys = Object.keys(obj);
    console.log(keys); //testing
    $.each(msg, function (i, item) {
        var tds = "";
        $.each(item, function (i, item) {
            tds += "<td>" + item + "</td>";
        });
        $('#table1').append("<tr>" + tds + "</tr>");
    });
}
});
}

//
});
});
</script>
</head>
<body>

<div class="form-box">
<div class="row">
<label>Insert your id</label><input type="text" id="instructorIdText" />
</div>
<div class="row">
<label>date</label><input type="text" id="instructordateText" />
</div>
<div class="row">
<button id="findClassBtn">Find Class</button>
</div>
<div class="row">
<table id="table1"></table>
</div>
</div>


</body>
</html>

Problem with above code

I get [object Object] syntax error now

Upvotes: 1

Views: 626

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because the msg value is a string because the response type of the request is not being correctly interpreted by jQuery. To fix this you can either; in order of preference, best to worst:

  1. Set the correct content type (application/json) when sending the response to the AJAX request
  2. Manually set the dataType property of the $.ajax() settings to 'json'.
  3. Use JSON.parse in your success method.

All of the above are assuming that the format of the string you are returning is valid JSON. You can test this yourself at http://jsonlint.com

its already set to application/json can u kindly show how to use Json/parse please.

If that's the case you should really look in to why it's not working as it's by far the best solution to this problem. That said, to manually set the dataType, do this:

$.ajax({
    url: 'foo.php',
    dataType: 'json',
    success: function(obj) {
        // console.log(obj.foo);
    }
});

To parse the JSON from a string manually, you can do this:

$.ajax({
    url: 'foo.php',
    success: function(msg) {
        var obj = JSON.parse(msg);
        // console.log(obj.foo);
    }
});

Upvotes: 1

Related Questions