Parse JSON array of hashes into jQuery tokenInput

Question

I have jQuery token input implemented for tagging purposes where a user can search for a tag or create a new one thanks to railscasts ep#382 & ep#258. Data comes from the tags.json url which is the index action of the tags controller. The data from tags.json looks like so:

[
  {
    "created_at":"2013-06-21T16:30:19Z",
    "explanation":"hitting the hosel of the club",
    "id":8,
    "name":"shank",
    "updated_at":"2013-06-21T16:30:19Z",
    "updated_by":"andy"
  },
  {
    "created_at":"2013-06-22T17:40:37Z",
    "explanation":"hitting the ground before the ball",
    "id":12,
    "name":"chunk",
    "updated_at":"2013-06-22T17:40:37Z",
    "updated_by":"andy"
  }
]

My tags have a name as well as an explanation so I would like to include them in the results list like the Token and Results Formatting demo here http://loopj.com/jquery-tokeninput/demo.html#formatting.

The code below (number of entries omitted for brevity) is from the jQuery tokenInput Token and Results Formatting demo.

Instead of having "name": "Shank" manually entered here as well as the other omitted entries, how can I extract the name and explanation from tags.json hash and use them in the same was as the results formatter line, e.g. item.name & item.explanation?

tags.js

jQuery(function() {
var question = $('#question_tag_tokens')
  return question.tokenInput([{
       "name": "Shank",
       "explanation": "hitting the hosel of the club"
   }
 ], {
    propertyToSearch: ["name"],
    resultsFormatter: function(item){ return "<li>" + "<div class='tag' style='display:inline;color:#fff;'>" + item.name + "</div>" + " " + item.explanation + "</li>" },
    prePopulate: question.data('preload')
  });
});

Are you asking how to load that json from rails in your javascript? The example shows that you would pass the whole array into your tokenInput call. — Joe Flynn
– Joe Flynn, Commented Jun 23, 2013 at 13:19
oh ok, its much simpler than i thought, you can access the item.explanation from token inputs('tags.json') PUt that in an answer @joeshmo and ill gladly accept. — dodgerogers747
– dodgerogers747, Commented Jun 23, 2013 at 13:22

Joe Flynn · Accepted Answer · 2013-06-24 00:55:51Z

The source for the example you referred to goes like this:

 $(document).ready(function() {
     $("#demo-input-local-custom-formatters").tokenInput(
         [{
             "first_name": "Arthur",
             "last_name": "Godfrey",
             "email": "[email protected]",
             "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
         },
         {
             "first_name": "Adam",
             "last_name": "Johnson",
             "email": "[email protected]",
             "url": "https://si0.twimg.com/sticky/default_profile_images/default_profile_2_normal.png"
         },
         ...

         ], 
         {
             propertyToSearch: "first_name",
             resultsFormatter: function(item){ ... },
             tokenFormatter: function(item) { ... }
         });
});

tokenInput seems to take an array of objects. Once you load the json with ajax, you just pass it in and tell it what field to search on and some callbacks to format the results.

Collectives™ on Stack Overflow

Parse JSON array of hashes into jQuery tokenInput

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related