Sunday, July 24, 2011

Playing with javascript creation of multi-level associative arrays, starting with flat associative arrays.

I am working with JSON data in the form of a list of associative arrays. The data comes from a web service, and I can't change the form it comes in. 
The JSON data from the web service looks like this:
   [    
    {flavor: "Spam", price: "low", rating: "good"},
    {flavor: "Ham", price: "medium", rating: "waste"},
    {flavor: "Eggs", price: "medium", rating: "better"},
    {flavor: "SpamAndEggs", price: "high", rating: "want"}    
]

I want to parse and rework it into an array of arrays, indexed by the 'flavor', so I can access the data in the form of Spam.price, Eggs.rating, etc.
To do this, I will create new objects like this client side, using javascript. I want my new objects to look like this:

{ 
  'Spam: {flavor: "Spam", price: "low", rating: "good"},  
  'Ham: {flavor: "Ham", price: "medium", rating: "waste"},    
   ..... etc.  
}


After playing around a bit I came up with an answer, putting it here so I can find it later. Maybe it will help you.
First, define a variable from the JSON data:

var food = [ 
  {flavor: "Spam", price: "low", rating: "good"}, 
  {flavor: "Ham", price: "medium", rating: "waste"}, 
  {flavor: "Eggs", price: "medium", rating: "better"}, 
  {flavor: "SpamAndEggs", price: "high", rating: "want"} 
]


Next, define a function to re-work the data into a new dictionary:

new_dict = {}; 
var cook = function (food) {
for (x in food) {
  var foodIndex= food[x]['flavor'];
  new_dict[foodIndex] = food[x];
  };
};
cook(food);


Putting it all together, you can test it by saving this as an html page or use a w3schools 'try it' editor:
<html>
  <head>
    <script type="text/javascript">
      var food = [ 
        {flavor: "Spam", price: "low", rating: "good"}, 
        {flavor: "Ham", price: "medium", rating: "waste"},     
        {flavor: "Eggs", price: "medium", rating: "better"}, 
        {flavor: "SpamAndEggs", price: "high", rating: "want"} 
        ]
      new_dict = {}; 
      var cook = function (food) {
        for (x in food) {
          var foodIndex= food[x]['flavor'];
          new_dict[foodIndex] = food[x];
          };
        };
      cook(food);
    </script>
  </head>
  <body>
    <script type="text/javascript">
       document.write(JSON.stringify(new_dict));
       document.write("<br /><br />");
       document.write(new_dict["Spam"]["flavor"]);
       document.write("<br />");
       document.write(new_dict.Ham.flavor);
       document.write("<br />");
       document.write(new_dict["Eggs"].flavor);
       document.write("<br />");
       document.write(new_dict.SpamAndEggs["flavor"]);
    </script>
  </body>
</html> 


The resulting output should look like this:


{"Spam":{"flavor":"Spam","price":"low","rating":"good"},"Ham":{"flavor":"Ham","price":"medium","rating":"waste"},"Eggs":{"flavor":"Eggs","price":"medium","rating":"better"},"SpamAndEggs":{"flavor":"SpamAndEggs","price":"high","rating":"want"}}

Spam
Ham
Eggs
SpamAndEggs

No comments:

Post a Comment