Unable to access JSON response

[matthewpull]

Hi,

I am unable to access the JSON data from my api as part of 'iron-form-response'. I am sending login data to an api on a local development server (running Django w/ django-rest-framework to handle the api). Chrome DevTools show the following response, which is the correct JSON data that I want to work with (I plan to store the access token as a cookie).

{"token":"967b6b0295a9f50cf9b37f554e0f11690e79f478"}

The headers are as follows (the request URL is my local IP, with the Django development server on port 80):

General
Request URL:http://192.168.0.13/api-token-auth/
Request Method:POST
Status Code:200 OK
Remote Address:192.168.0.13:80

Response Headers
Access-Control-Allow-Origin:*
Allow:POST, OPTIONS
Content-Type:application/json
Date:Sun, 06 Dec 2015 20:09:33 GMT
Server:WSGIServer/0.2 CPython/3.4.3
Vary:Cookie

Request Headers
accept:application/json
Accept-Encoding:gzip, deflate
Accept-Language:en-GB,en-US;q=0.8,en;q=0.6
Cache-Control:no-cache
Connection:keep-alive
Content-Length:48
content-type:application/x-www-form-urlencoded
DNT:1
Host:192.168.0.13
Origin:http://localhost:5000
Pragma:no-cache
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/47.0.2526.73 Safari/537.36

Form Data
view URL encoded
username:[my username]
password:[my password]

As you can see, the content-type is set as 'application/json', and the response seems to be perfectly formatted JSON.

My javascript is running the following code:

var form = document.getElementById('loginForm');
form.addEventListener('iron-form-submit', function(event) {
  document.getElementById('loginSpinner').setAttribute('active', '');
  console.log(event);
});
form.addEventListener('iron-form-response', function(event) {
  document.getElementById('loginSpinner').removeAttribute('active');
  console.log(event);
});
form.addEventListener('iron-form-error', function(event) {
  document.getElementById('loginSpinner').removeAttribute('active');
  console.log(event);
});

The console.log statements should be printing out the request and response information in the event's 'detail' property. While this works for the request...

Event {isTrusted: false, detail: Object}
  bubbles: true
  cancelBubble: false
  cancelable: false
  currentTarget: null
  defaultPrevented: false
  detail: Object
    password: "pass"
    username: "mattytheratty@gmail.com"
    __proto__: Object
  eventPhase: 0
  isTrusted: false
  isTrusted: false
  path: Array[6]
  returnValue: true
  srcElement: form#loginForm
  target: form#loginForm
  timeStamp: 1449432572701
  type: "iron-form-submit"
  __proto__: Event

... it does not work as well for the response:

Event {isTrusted: false, detail: iron-request}
  bubbles: true
  cancelBubble: false
  cancelable: false
  currentTarget: null
  defaultPrevented: false
  detail: iron-request
    __data__: Object
    __domApi: DomApi
    _aboveConfig: Object
    _clients: null
    _clientsReadied: true
    _config: Object
    _debouncers: Object
    _handlers: Array[0]
    _ownerShadyRoot: null
    _readied: true
    aborted: false
    accessKey: ""
    attributes: NamedNodeMap
    baseURI: null
    childElementCount: 0
    childNodes: NodeList[0]
    children: HTMLCollection[0]
    classList: DOMTokenList[0]
    className: ""
    clientHeight: 0
    clientLeft: 0
    clientTop: 0
    clientWidth: 0
    completes: Promise
    contentEditable: "inherit"
    customStyle: Object
    dataHost: undefined
    dataset: DOMStringMap
    dir: ""
    domHost: null
    draggable: false
    errored: false
    firstChild: null
    firstElementChild: null
    hidden: true
    id: ""
    innerHTML: ""
    innerText: ""
    isContentEditable: false
    lang: ""
    lastChild: null
    lastElementChild: null
    localName: "iron-request"
    namespaceURI: "http://www.w3.org/1999/xhtml"
    nextElementSibling: null
    nextSibling: null
    nodeName: "IRON-REQUEST"
    nodeType: 1
    nodeValue: null
    offsetHeight: 0
    offsetLeft: 0
    offsetParent: null
    offsetTop: 0
    offsetWidth: 0
    onabort: null
    onautocomplete: null
    onautocompleteerror: null
    onbeforecopy: null
    onbeforecut: null
    onbeforepaste: null
    onblur: null
    oncancel: null
    oncanplay: null
    oncanplaythrough: null
    onchange: null
    onclick: null
    onclose: null
    oncontextmenu: null
    oncopy: null
    oncuechange: null
    oncut: null
    ondblclick: null
    ondrag: null
    ondragend: null
    ondragenter: null
    ondragleave: null
    ondragover: null
    ondragstart: null
    ondrop: null
    ondurationchange: null
    onemptied: null
    onended: null
    onerror: null
    onfocus: null
    oninput: null
    oninvalid: null
    onkeydown: null
    onkeypress: null
    onkeyup: null
    onload: null
    onloadeddata: null
    onloadedmetadata: null
    onloadstart: null
    onmousedown: null
    onmouseenter: null
    onmouseleave: null
    onmousemove: null
    onmouseout: null
    onmouseover: null
    onmouseup: null
    onmousewheel: null
    onpaste: null
    onpause: null
    onplay: null
    onplaying: null
    onprogress: null
    onratechange: null
    onreset: null
    onresize: null
    onscroll: null
    onsearch: null
    onseeked: null
    onseeking: null
    onselect: null
    onselectstart: null
    onshow: null
    onstalled: null
    onsubmit: null
    onsuspend: null
    ontimeupdate: null
    ontoggle: null
    onvolumechange: null
    onwaiting: null
    onwebkitfullscreenchange: null
    onwebkitfullscreenerror: null
    onwheel: null
    outerHTML: "<iron-request hidden=""></iron-request>"
    outerText: ""
    ownerDocument: document
    parentElement: null
    parentNode: null
    prefix: null
    previousElementSibling: null
    previousSibling: null
    progress: Object
    rejectCompletes: ()
    resolveCompletes: ()
    response: Object
    root: iron-request
    scrollHeight: 0
    scrollLeft: 0
    scrollTop: 0
    scrollWidth: 0
    shadowRoot: null
    spellcheck: true
    status: 200
    statusText: "OK"
    style: CSSStyleDeclaration
    succeeded: true
    tabIndex: -1
    tagName: "IRON-REQUEST"
    textContent: ""
    timedOut: false
    title: ""
    translate: true
    url: "http://192.168.0.13/api-token-auth/"
    webkitdropzone: ""
    xhr: XMLHttpRequest
    __proto__: iron-request
  eventPhase: 0
  isTrusted: false
  isTrusted: false
  path: Array[6]
  returnValue: true
  srcElement: form#loginForm
  target: form#loginForm
  timeStamp: 1449432573472
  type: "iron-form-response"
  __proto__: Event

I am not sure why there is an iron-request object instead of formatted JSON, or how I can go about accessing the response. Any help with this would be greatly appreciated.

--Matt

[matthewpull]

Just worked out that the JSON data is in the 'response' attribute of the 'iron-response' object.