Json return each function

Question

Getting a json response from an ajax function that returns the code below:

["Please enter a Name","Please enter a Email","Please enter a Date","Please enter a message"]

The problem is that my current code will only show the last message, instead of all of the messages.

Jquery code is:

    var result = jQuery.parseJSON(response);

            console.log(response);

            $.each(result, function(key, value){ 

                if(key == 'success') {
                    // console.log(response);
                    success.find(".message").text(value);
                    success.slideDown();
                    success.delay(4000).fadeOut();

                }
                else {
                    // console.log(response);
                    error.find(".message").text(value);
                    error.slideDown();
                }


            })

How can I show each error message separately?

please explain what you expect the code to do and show relevant html. There is no property shown in array that would match 'success' so something isn't right in what you have shown — charlietfl
– charlietfl, Commented Mar 11, 2015 at 22:52
Success isn't been sent yet which will only be one message. errors has multiple hence it not been shown above. — jamper
– jamper, Commented Mar 11, 2015 at 23:00

Dhiraj · Accepted Answer · 2015-03-11 22:53:59Z

1

Your code is replacing text. Instead try using append success.find(".message").append(value + '<br />');

And same with error error.find(".message").append(value + '<br />');

edited Mar 11, 2015 at 22:53

answered Mar 11, 2015 at 22:47

Dhiraj

33.7k10 gold badges65 silver badges78 bronze badges

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

6 Comments

jamper Over a year ago

Thanks - how do I insert a line break after each error?

jamper Over a year ago

Also If you click submit the same object gets added - which I think it will when using append.

Dhiraj Over a year ago

what same object? Can you please explain more. Btw I updated my answer

jamper Over a year ago

I got the update - thanks, as the output is an error object, when submit is clicked the object appends to the existing html - rather than replacing it.

jamper Over a year ago

So essentially when first clicked I see 4 messages, when second click i see 8 messages

|

score 0 · Accepted Answer · 2015-03-11 23:30:57Z

0

I would consider changing how you structure the reponse.

See a js fiddle of the code here: http://jsfiddle.net/xrmgeazs/ or http://jsfiddle.net/xrmgeazs/1/ with success option

eg from php:

$response = json_encode( array(
 'success' => false,
 'errors' => array(
   'name =>"Please enter a Name",
   'email => "Please enter a Email"
  )
) );

echo $response;

The in your js eg:

var result = jQuery.parseJSON(response);
if( result.success ){
  //do your success code here
} else {
  //start by clearing previous errors
  $('form p.error').hide();

  //loop your errors here
  for (var key in result.errors){
     var errorName = key;
     var errorMessage = result.errors[key];

     //now place your error and show accordingly.
     $( 'div.'+key ).append('<p>'+errorMessage+'</p>');
  }


}

HTML EG:

<form action="something.php" method="post">
<!-- add rel fields as appropriate -->
<!-- also note this is a very simple structure and could be expanded for richer ui -->
<div class="name">
  <input type="text" name="name"/>
</div
<div class="email">
  <input type="text" name="name"/>
</div
</form>

edited Mar 11, 2015 at 23:30

answered Mar 11, 2015 at 22:58

user1037355

5 Comments

jamper Over a year ago

Any benefit to using the above method over mine (performance etc)?

jamper Over a year ago

Also errors are being set dynamically. which means your process above would not work.

user1037355 Over a year ago

incorrect. i have added to the html structure to explain more. this method is for dynamic forms with ajax. This allows the errors to be placed at the correct place.

user1037355 Over a year ago

this method, the client is agnostic the actual errors thus could be pulled from anywhere. The errors are placed into the form element parent container.

user1037355 Over a year ago

added jsfiddle example

Collectives™ on Stack Overflow

Json return each function

2 Answers 2

6 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related