search to json pull from API to html all nice and pretty?

I'm working on a project for a client where the site visitors can search Campusbooks.com and get the results displayed.

Contacted Campusbooks and was told that 开发者_Go百科I can use their API and have fun... and that's it.

I've found how to create a search form that pulls the results as posts the raw JSON. There's no formatting in the JSON so what I am getting is

  "response":{
    "@attributes":{
      "status":"ok",
      "version":"10"
    },
    "label":{
      "@attributes":{
        "plid":"3948",
        "name":"Textbooks 4 You"
      }
    },
    "page":{
      "@attributes":{
        "name":"search"
      },
      "count":"1000",
      "pages":"100",
      "current_page":"1",
      "results":{
        "book":[{
            "isbn10":"1463590776",
            "isbn13":"9781463590772",
            "title":"Life on the Mississippi",
            "author":"Mark Twain",
            "binding":"Paperback",
            "msrp":"13.99",
            "pages":"316",
            "publisher":"CreateSpace",
            "published_date":"2011-06-19",
            "edition":"Paperback",
            "rank":"99999999",
            "rating":"0.0",
            "image":"http://ecx.images-amazon.com/images/I/51sXKpUcB0L.SL75.jpg"
          },
          {
            "isbn10":"1406571253",
            "isbn13":"9781406571257",
            "title":"How to Tell a Story and Other Essays (Dodo Press)",
            "author":"Mark Twain",
            "binding":"Paperback",
            "msrp":"12.99",
            "pages":"48",
            "publisher":"Dodo Press",
            "published_date":"2008-02-29",
            "edition":"Paperback",
            "rank":"214431",
            "rating":"0.0",
            "image":"http://ecx.images-amazon.com/images/I/41S5poITLpL.SL75.jpg"
          },
          {
            "isbn10":"0520267192",
            "isbn13":"9780520267190",
            "title":"Autobiography of Mark Twain, Vol. 1",
            "author":"Mark Twain",
            "binding":"Hardcover",
            "msrp":"34.95",
            "pages":"743",
            "publisher":"University of California Press",
            "published_date":"2010-11-15",
            "edition":"1",
            "rank":"344",
            "rating":"0.0",
            "image":"http://ecx.images-amazon.com/images/I/41LndGG6ArL.SL75.jpg"
          },
          {
            "isbn10":"1936594595",
            "isbn13":"9781936594597",
            "title":"The Adventures of Huckleberry Finn",
            "author":"Mark Twain",
            "binding":"Paperback",
            "msrp":"8.88",
            "pages":"270",
            "publisher":"Tribeca Books",
            "published_date":"2011-04-07",
            "edition":"Paperback",
            "rank":"1285",
            "rating":"0.0",
            "image":"http://ecx.images-amazon.com/images/I/51J4kzmKcpL.SL75.jpg"
          }
        ]
      }
    }
  }
}

I need to take that output and make it all nice and pretty in HTML.

The script I am using to do this with at this point is:

      
    // Vanilla JS Example: CampusBooksJS
    (function () {
      var CampusBooks = require('campusbooks'),
        // This key is a special dummy key from CampusBooks for public testing purposes 
        // Note that it only works with Half.com, not the other 20 textbook sites, so it's not very useful,
        // but good enough for this demo
        cb = CampusBooks.create("T4y4JKewp48J2C72mbJQ"),
        cbform = document.getElementById("vanilla-campusbooksjs-form");


      // Note: This is for demonstration purposes only (with modern browsers)
      // Use MooTools or jQuery for a real-world solution that works cross-browser
      // (and please don't write you own, it's not worth it)
      function cbSearch(e) {
        var cbform = this,
          search = cbform.querySelector("select").value,
          data = cbform.querySelector("input").value;

        e.preventDefault();

        if (!data) {
          alert("Try Typing in a Keyword or Two First");
          return;
        }
        alert("Your Search: " + search + ": " +  JSON.stringify(data, null, '  '));

        var params = {};
        params[search] = data;
        cb.search(params).when(function (err, nativeHttpClient, data) {
          if (err || !data) {
            alert("Error: " + JSON.stringify(err) || "No Data Returned");
            return;
          }
          document.querySelectorAll("#vanilla-campusbooksjs-display")[0].innerHTML = JSON.stringify(data, null, '  ');
        });
      }

      // This will work on modern browsers only
      cbform.addEventListener("submit", cbSearch, false);
    }());
  

The search form is:

   <form id="vanilla-campusbooksjs-form">
  <select name="cb_search">
    <option>keywords</option>
    <option>author</option>
    <option>isbn</option>
  </select>
  : <input name="cb_value" type="text"/>
  <input type="submit" value="Search"/>
</form>
<div>
  <pre>
        <code id="vanilla-campusbooksjs-display">


    </code>
  </pre>
</div>

---

I hope this isn't too long of a post. If additional information is needed, please let me know.

---

I would suggest using Mustache Templates. Its easy to apply mustache templates to JSON and get some markup. It can be done on the server or client side.