Setting JSON Ajax string into variables with Jquery then append an

Question

I have an Ajax script that is currently receiving a JSON data string and appending the data to a <li> on the page, like this:

enter image description here

This is the Jquery script I am using to do this:

jQuery(document).ready(function($) {
  $('form.quform').Quform({
  successStart: function (response) {
  var li = $("<li>").text(JSON.stringify(response));
  $("#response").append(li)

But I want to assign variables to the 5 field results and display them in spans so they look something like after I add css to them:

enter image description here

I have tried different things to get this to work, and read a lot of stack articles, One Stack article says to assign the string a variable like this var data = JSON.stringify(myObject, replacer);, but it has not worked. This is the last thing I have tried, but I know it is not right. Any help would be appreciated, thanks.

jQuery(document).ready(function($) {
  $('form.quform').Quform({
    successStart: function (response) {
      var data = JSON.stringify(myObject, replacer);
      var content = "balance: " + data.balance + " account_number:" + data.account_number;
      var li = $("<li><span>").text(content);
      $("#response").parent().append(li);

Also this is the JSON string I receive to the page:

{"type":"success","message":"Your message has been sent, thank you.","record":{"id":108,"bank_name":"Jane Doe","balance":"200","account_number":"8765432187654321","customer_id":"250","monthly":"50"}}

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

Putting var data = JSON.stringify(myObject, replacer); there doesn't make sense because myObject and replacer are not defined. Don't just copy and paste code. The other answers just provided the general signature of JSON.stringify. You already know how to use it, because you used it in your first code snippet.

Anyways, JSON.stringify converts an existing object/array to a string containing JSON, which also means that response already is an object. So all you have to do is access its properties. In your case,

var data = response.record;

will set data to the correct value.

More info: Access / process (nested) objects, arrays or JSON

edited May 23 '17 at 12:01

Community

1
1

answered Jan 19 '14 at 18:47

Felix Kling

795,719
175
1,089
1,143

Thanks for your help.... that makes sense, then how do I separate the fields names from the values when setting the variable. I don't want to show it like this `bank_name":"Jane Doe`, I would only want to show `jane doe` – Michael Falciglia Jan 19 '14 at 18:51
You don't have to. If `var x = {foo: "bar"};` is an object, then `x.foo` returns `"bar"`. Hence `data.bank_name` returns `"Jane Doe"`. This [MDN article](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) explains quite well how objects work. – Felix Kling Jan 19 '14 at 18:53
I still am not getting it, am I suppose to change this also `var li = $("
").text(JSON.stringify(response));` or just add this `var data = response.record;` on the next line. Sorry, I just have no experience with JSON.

Michael Falciglia

Jan 19 '14 at 19:28

In your second code snippet, replace `var data = JSON.stringify(myObject, replacer);` with `var data = response.record;`. You should also change `var li = $("

").text(content);` to `var li = $("

").text(content);`. `$("

")` won't work.

– Felix Kling Jan 19 '14 at 20:03

score 0 · Answer 2 · answered Jan 19 '14 at 18:53

0

Assuming that your response is a JSON response, you would not need to do:

var data= JSON.stringify(myObject, replacer);

Besides, myObject and replacer seem to be undefined. Also, it looks like this line:

var content = "balance: " + data.balance + " account_number:" + data.account_number;

should be:

var content = "balance: " + data.record.balance + " account_number:" + data.record.account_number;

If this does not work then try the following:

var data = $.parseJSON(response);
var content = "balance: " + data.balance + " account_number:" + data.account_number;

This will actually parse the response variable to an object that you can then access through "data.record".

answered Jan 19 '14 at 18:53

Kukiwon

1,222
12
20

I thought parse was the opposite. If I wanted to send the string back to the server, I would use that to format an object – Michael Falciglia Jan 19 '14 at 18:58
See [parseJSON Docs](http://api.jquery.com/jquery.parsejson/). It takes a JSON string and returns a POJO (Plain Old Javascript Object). – Kukiwon Jan 19 '14 at 19:02
I had one more question... based on your answer, I could just keep it the way it is, then set a variable for the string. What would that look like `var data = $.text(JSON.stringify(response));` – Michael Falciglia Jan 19 '14 at 20:02
This doesn't make sense to me. I suggest you take a look at @Felix Kling's comment. – Kukiwon Jan 19 '14 at 20:13

Setting JSON Ajax string into variables with Jquery then append an

2 Answers2