Как извлечь данные из массива объектов (доступен JQuery)

Вы можете использовать функцию .grep:

var category = 'cat2';

var result = $.grep(main, function() {
    return this.key === category;
});

if (result.length > 0) {
    // We have found an element in the array that satisfies the condition
    // => we could access it data property:
    var data = result[0].data; // this will equal to ['img/icon1.png', 'img/icon2.png']
}

В качестве альтернативы использованию jQuery вы можете использовать встроенную функцию filter javascript для достижения той же цели:

var result = main.filter(function(element) {
    return element.key === category;
});

if (result.length > 0) {
    // We have found an element in the array that satisfies the condition
    // => we could access it data property:
    var data = result[0].data; // this will equal to ['img/icon1.png', 'img/icon2.png']
}

это поможет вам!

http://jsfiddle.net/kasperfish/2XJNt/

alert(main[0].data);

или если вы хотите перебрать свою основную переменную

http://jsfiddle.net/kasperfish/2XJNt/1/

for (var i=0;i<main.length;i++)
{
    alert(main[i].data);
}

Таким образом, вы получили JSON, хранящийся в объекте. Теперь этот объект является чистым массивом Javascript. Так перебирайте его и получите значения.

for(var i=0;i<main.length;i++){
    alert('Key['.concat(i).concat('] =').concat(main[i].key));
    alert('data['.concat(i).concat('] =').concat(main[i].data));
}

Мое решение вашего примера как скрипки - http://jsfiddle.net/hunkyhari/grttY/1/

Вы также можете использовать обычный JavaScript для реорганизации своих данных, например:

var flat_data = [];
var all_keys = []
var data_by_cat = {};

for (var i = 0; i < main.length; ++i) {

   var item = main[i];

   // check if you already saved that key
   if (all_keys.indexOf(item['key']) == -1) {

      all_keys.push(item['key']);

      // you also need to add a new key to data_by_cat
      data_by_cat[item['key']] = [];

   }

   // append all data to flat_data and data_by_cat
   for (var j = 0; j < item['data'].length; ++j) {

      flat_data.push(item['data'][j]);
      data_by_cat[item['key']].push(item['data'][j]);

   }

}

Затем вы получаете все свои элементы data в flat_data, список ключей в all_keys и словарь с вашими ключами в виде ключей и массив всех ваших данных в категории в качестве значений, например:

var flat_data = [
    "img/icon1.png",
    "img/icon2.png",
    "img/icon3.png",
    "img/icon1.png",
    "img/icon2.png",
    "img/icon3.png",
    "img/icon1.png",
    "img/icon2.png",
    "",
    "",
    "img/icon1.png"
    ];

var all_keys = [
    "all",
    "cat1",
    "cat2",
    "cat3",
    "cat4",
    "cat5"
    ];

var data_by_cat = {
    "all": [
        "img/icon1.png",
        "img/icon2.png",
        "img/icon3.png"
        ],
    "cat1": [
        "img/icon1.png",
        "img/icon2.png",
        "img/icon3.png"
        ],
    "cat2": [
        "img/icon1.png",
        "img/icon2.png"
        ],
    "cat3": [
        ""
        ],
    "cat4": [
        ""
        ],
    "cat5": [
        "img/icon1.png"
        ]
};

Используйте http://api.jquery.com/jQuery.getJSON/, если данные JSON поступают из API или файла где-нибудь.

В противном случае просто войдите в свойства объекта как таковые: main[0].key или main[1].data

Пример: http://jsfiddle.net/WmEbU/

требуемые данные уже "извлекаются" из json, так как он находится в самом коде, назначенном переменной, у интерпретатора уже есть массив

как и для остальных вопросов: (не-jquery-решение)

для извлечения только "ключей" (значения element.key каждого элемента в массиве):

main.map(function (a) {return a.key})

для извлечения только данных:

main.map(function (a) {return a.data})

и получить по категориям:

main.filter(function(a){return a.key===category})[0]

глянь сюда