How to make Javascript object available outside function?

Question

I am retrieving some JSON data with the following function. It is called when an element is clicked and the data is used to create a table, populate the cells with images and append the table to a div.

function LoadImagesByCategory() {
    $.getJSON("/Service/GetJson.ashx?data=images", function(data) {
        jsObjectData = data.ImageCollection.Images;
        //Create a table named imageTable
        $("#imagesByCategory").append(imageTable);
        }
    })

the jsObjectData looks like this.

{"ImageCollection":
    {"Images":
    [{  "ImageID":"68",
        "CatID":"1",
        "Name":"uploadedFile",
        "Location":"/Images/Art/Full/68.gif",
        "ClipLocation":"/Images/Art/Clips/68.gif",
        "FullHeight":"504",
        "FullWidth":"451"
       },
       { "ImageID":"69",
         "CatID":"1",
         "Name":"uploadedFile",
         "Location":"/Images/Art/Full/69.gif",
         "ClipLocation":"/Images/Art/Clips/69.gif",
         "FullHeight":"364",
         "FullWidth":"500"
        },
        etc. etc 
     ]
   }
 }

It contains additional info about the images like the FullHeight and the FullWidth that I would like to be able to retrieve when an img is clicked. For example if I made the id of the img something like "68ArtImage" where 68 is the ImageID I would like to be able to pass the 68 into a function attached to the jsObjectData and retrieve the corresponding Image Data. The problems are first that I don't know how to make the object avail. outside the function and second I don't know how to attach the function to the object.

What is imageTable here? you haven't specified what role that variable plays. — Michael Robinson
– Michael Robinson, Commented Aug 17, 2010 at 22:01
when you click the image, what happens next (modal popup with information, redirected to another page...)? — Tommy
– Tommy, Commented Aug 17, 2010 at 22:02
@M Robinson - He asked a question earlier about how to put this into a 4 column table (the data looked familiar), which is what the imageTable variable is and why I asked what I did in my comment. — Tommy
– Tommy, Commented Aug 17, 2010 at 22:03
imageTable is just a string that defines an html table with an image in each cell. When an image is clicked I am going do some calculations based on the values in the FullHeight and FullWidth and then create the text for a img element and append it to another element on the page — etoisarobot
– etoisarobot, Commented Aug 17, 2010 at 22:10

Michael Robinson · Accepted Answer · 2010-08-17 22:21:51Z

After reading your question again, perhaps this is what you want?

function getImageData(id, json){
    for(i in json.ImageCollection.Images){
       if( json.ImageCollection.Images[i].ImageID == 69){
            return json.ImageCollection.Images[i];
       }
    }
    return false;
}

getImageData will search the given json object and return the image object (like an associative array) if it exists, else false.

Example:

var json = {"ImageCollection":
    {"Images":
    [{  "ImageID":"68",
        "CatID":"1",
        "Name":"uploadedFile",
        "Location":"/Images/Art/Full/68.gif",
        "ClipLocation":"/Images/Art/Clips/68.gif",
        "FullHeight":"504",
        "FullWidth":"451"
       },
       { "ImageID":"69",
         "CatID":"1",
         "Name":"uploadedFile",
         "Location":"/Images/Art/Full/69.gif",
         "ClipLocation":"/Images/Art/Clips/69.gif",
         "FullHeight":"364",
         "FullWidth":"500"
        }
     ]
   }
 }

function getImageData(id, json){
    for(i in json.ImageCollection.Images){
       if( json.ImageCollection.Images[i].ImageID == 69){
            return json.ImageCollection.Images[i];
       }
    }
    return false;
}

if(image = getImageData(69, json)){
    alert('found the image wooo!');
    // now do something with your image object
}
else{
    alert('no image with that id found');
}

Ruan Mendes · Accepted Answer · 2010-08-17 23:27:38Z

Here's some pseudo code:

//global
var gImageTable = {};


function LoadImagesByCategory() {
  $.getJSON("/Service/GetJson.ashx?data=images", function(data) {
    jsObjectData = data.ImageCollection.Images;
    // Add the images to the image table
    for (var i=0; i < jsObjectData.length; i++) {
      var img = jsObjectData[i];
      gImageTable[img.ImageId] = img;
    }

    // Create a table named imageTable. Should add the id into each of the images
    // so we can access its data from the click handler
    $("#imagesByCategory").append(imageTable);
  })
}

// The click handler that knows about image map structure
$("#imagesByCategory").click(function (e) {
  // or something smarter to detect that it
  // was a click within one of the images
  if (e.target.tagName == "IMG") {
    var imageData = gImageTable[e.target.id];    
    console.log(imageData.CatID, imageData.FullHeight);
  }
});

This is not how I would put it into production. I hate globals, so I would have an object that manages that table. Then the object could hold the reference to the imageTable

Collectives™ on Stack Overflow

How to make Javascript object available outside function?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related