Question

I’m making a simple javascript app that needs to run locally (on a CD without internet) and it’s basically a enhanced image gallery. There are a lot of files that need to be “loaded”, so I’m putting the files in a json format, like this:

{
     number: 338,
     images: 
     [
       {
          picture_path : "path/file.png",
          place : "Brazil",
          metadata : "...",
       },
       {
          ...
       }
     ]
}

My question is, how I can get and structure this data? Is there a Jquery getJSON locally method/parser? It seems that I can reparse the json using javascript eval, but how can I get the content?? Also, is there a way to find info on the give structure data, for instance, suppose that I want all pictures from “Brazil”.

I was thinking on embedding a php server and reading, but I thought this is too much trouble…..

Answer 1

To address the question regarding reading json directly from disk using jquery, getJSON supports this; from their documentation at http://api.jquery.com/jQuery.getJSON/

$.getJSON('data/images.json', function(data) {

    // you asked a question regarding retrieving all images from place === "Brazil"
    // so we'll store said images in this array
    var picturesFromBrazil = new Array();

    // you want to iterate through the array of images, so we're reference them here
    var images = val.images; 


    // iterate through your images array
    $.each(images, function(key, val) {

    // your data, as described, is an array, where each element is a dictionary
    /*
    {
         number: 338,
         images: 
         [
           {
              picture_path : "path/file.png",
              place : "Brazil",
              metadata : "...",
           },
           {
              ...
           }
         ]
    }
    */

    // question: is there a way to find info on the given structure data, for instance,
    // support that I want all pictures from "Brazil"

    if (val.place === "Brazil" && val.picture_path !== undefined) {
        picturesFromBrazil.push(val.picture_path);
    }
});