JSFiddle - React, Tailwind, and code Playground

by JohnMunsch

HTML

<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>

JavaScript

// These data structures can all be ignored up here, they are fake data being returned by jsFiddle because I'm
// using jsFiddle's built in ability to fake some simple AJAX calls.
var opportunities = {
    json : $.toJSON({
      "opportunities" : [
        { "name" : "butcher" },
        { "name" : "baker" },
        { "name" : "candlestick maker" }
      ]
    }),
  delay : 2
};

var opportunityTypes = {
  json : $.toJSON({
    "types" : [
        { "type" : "job" }
      ]
    }),
  delay : 2
};

var view = {
  json : $.toJSON({
      html : "<p>A bunch of HTML we would want to stick in a div somewhere</p>"
    }),
  delay : 2
};    

// Here's where the actual code we care about is:
var testObject = {
  loadOpportunities: function () {
    // This is basically saying that we're getting something via AJAX, but we want to take a swipe at changing it
    // before anyone else gets it, so by using pipe we're returning a different promise than the AJAX promise and
    // the value returned from that is what we want others to get.
    return $.ajax({
        url: "/echo/json/",
        data: opportunities,
        type: "POST"
      }).pipe(
        function (result) {
          console.log("[1]", result);
            
          // Change the result in some way and then return the changed result. Otherwise there's no point in using
          // a pipe() here, a done() would work as well.
          result.opportunities[0].name = "meat packer";

          return result;
        }
      );      
  },

  loadTypes: function () {
    // This example is different from loadOpportunities in that it isn't using a pipe() so what is returned from
    // this function is the same promise that $.ajax() gave us. Any call to .done() just echos back the same
    // promise you gave it.
    return $.ajax({
        url : "/echo/json/",
        data : opportunityTypes,
        type : "POST"
      }).done(
        function (result) {
          console.log("[1]", result);
           
 ...