title: Sending a json object with ajax post
body: <p>Im working on a project, where we try to exchange different parameters between the UI and a RestAPI via AJAX. The RestAPI defines how the data has to look:</p>
  <p><a href="https://i.stack.imgur.com/7OnbR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7OnbR.png" alt="Parameters to send" /></a></p>
  <p><a href="https://i.stack.imgur.com/m8dUS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/m8dUS.png" alt="enter image description here" /></a></p>
  <p>I tried to solve it this way:</p>
  <pre><code> $(document).ready(function(){
    $(&quot;#submit&quot;).click(function(){
        var credentials = [
            {user_name: $(&quot;#uname&quot;).val(),
              password: $(&quot;#pwd&quot;).val()
            }
        ];
        alert(credentials);
        $.ajax({
            url:&quot;../rest/user/login&quot;,
            type:&quot;POST&quot;,
            data:JSON.stringify({credentials: credentials}),
            success: function(){
              window.location.href = &quot;startrackhome.html&quot;;
            },
            error:  function error(response){
              try{
                var json = JSON.parse(response.responseText);
                if(typeof json.message === 'undefined'){
                  throw new Error(&quot;Response json has no message&quot;);
                }
                else{
                  alert(json.message);
                }
              }
            catch(ex){
              alert(&quot;unexpected error (code:&quot; + response.status +&quot;)&quot;);
            }
          }
  
        });
     });
     });
  </code></pre>
  <p>The alert shows this: [object Object]</p>
  <p>And I always get an error message (error: 400), which means that I mus have made a mistake and I think the format I'm sendig is wrong but I dont know how to fix it.</p>
  <p>I hope you can help me! :)</p>