Setting JSON Ajax string into variables with Jquery then append an <li>

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"}}

Community · Accepted Answer · 2017-05-23 12:01:20Z

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, 2017 at 12:01

CommunityBot

11 silver badge

answered Jan 19, 2014 at 18:47

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

10 Comments

Michael Falciglia Over a year ago

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

Felix Kling Over a year ago

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 explains quite well how objects work.

Michael Falciglia Over a year ago

I still am not getting it, am I suppose to change this also var li = $("<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.

Felix Kling Over a year ago

In your second code snippet, replace var data = JSON.stringify(myObject, replacer); with var data = response.record;. You should also change var li = $("<li><span>").text(content); to var li = $("<li>").text(content);. $("<li><span>") won't work.

Michael Falciglia Over a year ago

oh don't use JSON you are saying

|

Kukiwon · Accepted Answer · 2014-01-19 18:53:54Z

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, 2014 at 18:53

Kukiwon

1,36212 silver badges22 bronze badges

4 Comments

Michael Falciglia Over a year ago

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

Kukiwon Over a year ago

See parseJSON Docs. It takes a JSON string and returns a POJO (Plain Old Javascript Object).

Michael Falciglia Over a year ago

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

Kukiwon Over a year ago

This doesn't make sense to me. I suggest you take a look at @Felix Kling's comment.

Collectives™ on Stack Overflow

Setting JSON Ajax string into variables with Jquery then append an <li>

2 Answers 2

10 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

10 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related