JSON to javascript variable

Question

I'm creating a login form with html,css and javascript.

I'm doing a POST to an API in order to receive some JSON with the identified username that I just submitted in the form.

If the email and password are correct, I receive the JSON with all the info from my API. The problem is that I don't know how to manipulate the info that I receive... I'd like to save the JSON I'm receiving through the POST to a variable and then be able to access the account type or the other properties of that object.

<form name="login" id="myForm" action="API_URL" method="post" class="form-signin">
    <h3 class="form-signin-heading">Por favor inicie sesión</h3>
    <label for="inputEmail" class="sr-only">E-mail</label>
    <input type="email" name="email" class="form-control" placeholder="E-mail" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" name="password" class="form-control" placeholder="Contraseña" required>
    <div class="checkbox">
      <label>
      <input type="checkbox" value="remember-me"> Recordarme
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" id type="submit">Iniciar sesión</button>
  </form>

After hitting submit, I receive the JSON like this: !(https://i.stack.imgur.com/wM6aQ.jpg) This is my JQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js%22%3E



$(document).ready(function() {

        $('#myform').submit(function() {

              $.ajax({
                  type: "POST",
                  url: '/form/',
                  data: {
                      email: $("#inputEmail").val(),
                      password: $("#inputPassword").val()
                  },
                  success: function(data)
                  {
                      if (data === 'Correct') {

                        var objeto = data.parse();
                        console.log(objeto);

                      }
                      else {
                          alert(data);
                      }
                  }
              });
      });
  });

  </script>

Can anyone please point me in the right direction?

What is the hard part of searching for [documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)? — Teemu, Nov 07 '17 at 07:06
I am unable to view your JSON Screenshot you attached.. can you post it again — test_124, Nov 07 '17 at 07:06
refer this - https://stackoverflow.com/questions/6255344/how-can-i-use-jquery-to-post-json-data — Tushar Walzade, Nov 07 '17 at 07:13
Here's more reference - https://www.abeautifulsite.net/postjson-for-jquery — Tushar Walzade, Nov 07 '17 at 07:16
Serialize & submit form - https://stackoverflow.com/questions/15173965/serializing-and-submitting-a-form-with-jquery-post-and-php — Tushar Walzade, Nov 07 '17 at 07:21
Possible duplicate of [How can I use JQuery to post JSON data?](https://stackoverflow.com/questions/6255344/how-can-i-use-jquery-to-post-json-data) — Star, Nov 07 '17 at 07:22

score 3 · Answer 1 · answered Nov 07 '17 at 07:26

If you are using Javascript try like this:

              $.ajax({
                type: "POST",
                url: '/form/',
                data: {
                   email: $("#inputEmail").val(),
                   password: $("#inputPassword").val()
                },
                success: function(response){
                    var data = response;
                    contactData = JSON.parse(data);
                        console.log("ID: " + contactData.id);
                        console.log("ID: " + contactData.user_type_id);
                        console.log("ID: " + contactData.first_name);
                        console.log("ID: " + contactData.last_name);
                        console.log("ID: " + contactData.email);
                        console.log("ID: " + contactData.password);

                 },
                failure : function(data){
                    alert('Server Connection failed');
                },
                error : function(request,error){
                    alert(error);
                }
             });

score 0 · Answer 2 · answered Nov 07 '17 at 07:18

0

You can get Json in array in php with
mixed json_decode ( string $json [, bool $assoc = false [, int $depth = 512 [, int $options = 0 ]]] )

answered Nov 07 '17 at 07:18

Ramin Roshan

526
1
5
10

1

but he doesn't mention that he's using PHP – Tushar Walzade Nov 07 '17 at 07:19
For example. He can edit it with his own language. Just a search on this item is said – Ramin Roshan Nov 07 '17 at 07:26

score 0 · Answer 3 · answered Nov 07 '17 at 07:39

You are posting data and it will be received in string format.If you are only dealing with JSON then you can use JSON parser like this

let body = JSON.Parse(req.body);

Now body variable will contain an object and you can access properties easily.If you are using nodeJs on server side than body-parser middle ware can be used also.Let me know in comment if there is something contrary.

score -1 · Answer 4 · answered Nov 07 '17 at 07:09

You need to invoke the call using JavaScript & AJAX.

Add an OnClick event listener to the submit button and call handleLoginClicked().
Collect all variable from the inputs and use ajax to post to the url.
Get back the response and parse the JSON, assign to a javascript variable.

You can use jQuery for example to do so: jQuery.Post

JSON to javascript variable

4 Answers4