Привязка полимерных данных из Web API - PullRequest
Новая
       21

Привязка полимерных данных из Web API

0 голосов
/ 12 июня 2018

Я хочу привязать некоторые данные к переменной по команде (нажатием кнопки) с сервера.На сервере у меня есть функция, которая возвращает объект JSON (это было проверено, если я открываю ссылку API напрямую, я получаю правильный формат JSON).Тем не менее, переменная остается неопределенной, что бы я ни делал.У меня есть кнопка и таблица (px-data-table является частью структуры и должна иметь возможность отображать данные в формате JSON): 

<button id="runPredictionButton">
    <i>Button text</i>
</button>
<px-data-table 
      table-data$="{{data}}"
</px-data-table>
<div class="output"></div>

И я обрабатываю нажатие кнопки и определяю переменные следующим образом: 

  <script>
    Polymer({
      is: 'custom-view',
      properties: {
        data: {
          type: Object,
          notify: true
        }
      },
    ready: function() {
      var self = this;
      this.$.runPredictionButton.addEventListener('click', function() {
          filerootdiv.querySelector('.output').innerHTML = 'Is here';    
          var xhr = new XMLHttpRequest();
          this.data = xhr.open("GET", "API/predict") //as mentioned, API/predict returns a valid JSON
          console.log("This data is:" + this.data);
          this.data = xhr1.send("API/predict","_self")
          console.log("This data is_:" + this.data);
      });
    }
  });      
  </script>

По какой-то причине на консоли this.data отображается как undefined, оба раза я пытаюсь его распечатать.Чего мне не хватает?Как передать JSON из вызова API в переменную this.data?

1 Ответ

0 голосов
/ 12 июня 2018

xhr.send() не возвращает то, что вы хотите.

Сначала вам нужно изучить XmlHttpRequest.Вот документация .И несколько простых примеров

Просто вам нужно прослушать onreadystatechange в вашей переменной xml.Там вы сможете получать данные с сервера.

Дополнительно, почему вы используете addEventListener.Вы можете просто установить on-click. 

<button id="runPredictionButton" on-click="getDataFromServer">
    <i>Button text</i>
</button>

, а затем определить функцию javascript, которая вызывается каждый раз, когда пользователь нажимает кнопку.

getDataFromServer: function() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "API/predict");
  xhr.send("API/predict","_self");
  xhr.onreadystatechange = function() {
   // 4 = data returned
   if(xhr.readyState == 4) {
     // 200 = OK
     if (this.xhttp.status == 200) {
       // get data
       this.data = xhr.responseText;
     }
   }
  }.bind(this);
}
...