Form-O-Fill: Example of findHtml() -> sending data to an API -> display it

fof-htmlfinder-get-to-api-change-page-example.js

var rules = [{
  // This rule demonstrates:
  // 1. Fetching DOM elements from the page
  // 2. Taking content from those DOM elements and send it to a API
  // 3. Taking the response JSON from the API and change
  //    a form field based on that
  //
  // To test it import the rule, goto 'https://www.babycenter.com/top-baby-names-2017.htm'
  // and press the Form-O-Fill extension button
  // Now the search field at the top right should have a personalized Chuck Norris joke
  // inside :)
  "url": "https://www.babycenter.com/top-baby-names-2017.htm",
  "name": "Fetch content from page -> GET to API -> do something with the response",
  "before": function(resolve, context) {
    // Just a message:
    Libs.h.displayMessage("Take a look at the search field on the top right!");
    
    // Search for baby names
    context.findHtml("a[href^='/baby-names-']").then(function(babyNames) {
      // Take the first and use it in the GET to the Chuck Norris joke API :)
      // jQuery.post(url, { the: data }) would also work
      
      // Choose a random name from all found names and strip HTML
      var name = babyNames[Math.floor(Math.random() * babyNames.length)].replace(/<.*?>/g, "");
      jQuery.get("http://api.icndb.com/jokes/random?firstName=" + name, function(serviceAnswer) {
        // Take the joke from the JSON response and use it as $data for value functions below
        resolve(serviceAnswer.value.joke);
      });
    });
  },
  "fields": [{
    // Fill search field with a Chuck Norris joke
    "selector": "#q",
    "value": function($el, $data) {
      return $data;
    }
  }]
}
];