Javascript 개체를 함수 외부에서 사용 가능하게 만드는 방법은 무엇입니까?

Question

다음 JSON 데이터를 검색하고 있습니다. 이것은 요소를 클릭하고 데이터를 사용하여 테이블을 만들고 이미지로 셀을 채우고 div에 테이블을 추가 할 때 호출됩니다.

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

jsObjectData는 다음과 같습니다.

{"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 
    ] 
    } 
} 

그것은 내가 IMG를 클릭하면 검색 할 수하고자하는 FullHeight와 전각과 같은 이미지에 대한 추가 정보가 포함되어 있습니다. 예를 들어 "68ArtImage"와 같은 img의 ID를 만든 경우 68이 ImageID이고 68을 jsObjectData에 연결된 함수로 전달하고 해당 이미지 데이터를 검색 할 수 있기를 원합니다. 문제는 먼저 개체를 어떻게 사용할 수 있는지 모릅니다. 함수 밖에서는 함수에 객체를 연결하는 방법을 알지 못합니다.

Answer 1

질문을 다시 읽은 후 아마도 원하는 내용일까요?

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

주어진 JSON 객체를 검색하고, 그렇지 않은 경우는 false 있으면 (연관 배열 등) 이미지 오브젝트를 반환한다.

예 :

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'); 
} 

Answer 2

는 여기에 몇 가지 의사 코드입니다 :

//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); 
    } 
}); 

이 내가 생산에 넣어 얼마나 없습니다. 나는 전역을 싫어한다. 그래서 나는 그 테이블을 관리하는 객체를 가질 것이다. 그런 다음 객체가 imageTable에 대한 참조를 보유 할 수 있습니다.