title: js - knockout Unable to process binding "text: function (){return
body: <p>can't find where i made a mistake.
  I get this error message when I run my code:</p>
  
  <pre><code>Uncaught ReferenceError: Unable to process binding "text: function (){return quoteAuthor }"
  Message: quoteAuthor is not defined
  </code></pre>
  
  <p>newQuote might add new position to quotesArray, and cause adding new line tot able. It worked fine when newQuote had no ajax request, so added all times same object. ajax himself works too. Don't know what to do.
  My HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;title&gt;&lt;/title&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;h2&gt;Your quotes&lt;/h2&gt;
  
          &lt;table&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Автор&lt;/th&gt;
                      &lt;th&gt;Цитата&lt;/th&gt;
                      &lt;th&gt;Ссылка&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody data-bind="foreach: quotesArray"&gt;
                  &lt;tr&gt;
                      &lt;td data-bind="text: quoteAuthor"&gt;toDo&lt;/td&gt;
                      &lt;td data-bind="text: quoteText"&gt;toDo&lt;/td&gt;
                      &lt;td data-bind="text: quoteLink"&gt;toDo&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;button data-bind="click: addQuote"&gt;Add quote&lt;/button&gt;
          &lt;script type="text/javascript" src="koQuotesScript.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My JS:</p>
  
  <pre><code>function newQuote () {
      var self = this;
  
      $.ajax(
          {
          dataType : "jsonp",
          jsonp : "jsonp",
          url : "https://api.forismatic.com/api/1.0/?method=getQuote&amp;format=jsonp&amp;lang=en",
          error : function(data) {
                  alert("Error - 2");
          },
          success : function(response){
              console.log(response);
              self.quoteAuthor = response.quoteAuthor;
              self.quoteLink = response.quoteLink;
              self.quoteText = response.quoteText;
              console.log(self);
          }
      });
  }   
  
  function ModelView () {
      var self = this;
  
      self.quotesArray = ko.observableArray([
          {quoteAuthor: "Neil Alden Armstrong", 
          quoteLink: "https://en.wikiquote.org/wiki/Neil_Armstrong", 
          quoteText: "That's one small step for man, one giant leap for mankind."},
  
          {quoteAuthor: "Mark Twain (Samuel Langhorne Clemens)", 
          quoteLink: "https://en.wikiquote.org/wiki/Mark_Twain", 
          quoteText: "If you tell the truth you don't have to remember anything."}
      ]);
  
      self.addQuote = function () {
          self.quotesArray.push(new newQuote());
      };
  }
  
  ko.applyBindings(new ModelView());
  </code></pre>