Разобрать данные JSON, а затем передать все их значения другой функции

Question

Я создаю этот веб-сайт: http://collections.design

То, как это работает, заключается в чтении данных всех инструментов из JSON с использованием jQuery (я не знаю много javascript). Затем вы можете нажать на элемент, и откроется боковая панель с дополнительной информацией. Но есть много повторяющегося кода, поэтому я пытаюсь немного его оптимизировать.

Сначала я анализирую JSON:

// The data source
var data_source = "../data/tools/tools.json";

// Parsing the JSON
$.getJSON(data_source, function(data) {

  $.each(data, function(key,val) {

    // And I'm storing all of its values in variables, to make them easier to read:
    var name = val.availability.name;
    var linux = val.os.linux;

    // Then I'm using all that to render each item on screen
    …

  });
});

У каждого элемента есть кнопка, которая вызывает другую функцию для создания и открытия боковой панели. Боковая панель повторно использует данные этого элемента из JSON. Эта функция для создания боковой панели использует переменную name в качестве параметра, но затем внутри снова анализирует JSON, чтобы получить остальные необходимые ей значения.

Мой вопрос:

Как я могу "инкапсулировать" все переменные, когда я выполняю синтаксический анализ JSON, а затем передать его в качестве параметра другой функции; и, наконец, индивидуально прочитать каждое из этих значений в другой функции?

Я пытался работать с массивами. Но мне не удалось это сработать, помня также, что я пытаюсь упростить вещи, не повторяю себя и сохраняю короткие имена ...

Может быть, я спрашиваю слишком много, но любые указатели или ссылки делать c будет оценено.

Answer 1

Я вижу два способа сделать это.

1) Сохранить данные JSON вне области видимости, чтобы вы могли использовать их повторно и передать индекс данных, которые вы хотите.

Что-то как это

// The data source
var data_source = "../data/tools/tools.json";
var all_data;

// Parsing the JSON
$.getJSON(data_source, function(data) {

  all_data = data;

  $.each(data, function(key,val) {

    $('.button').on('click', function() { callToOtherFunction(key) }) 

  });
});

function callToOtherFunction(key) {
  console.log(all_data[key]);
}

2) Как сказал Сэм Акс, передайте данные непосредственно в функцию

// The data source
var data_source = "../data/tools/tools.json";

// Parsing the JSON
$.getJSON(data_source, function(data) {

  $.each(data, function(key,val) {

    $('.button').on('click', function() { callToOtherFunction(key) }) 

  });
});

function callToOtherFunction(val) {
  console.log(val);
}

Вот рабочая скрипка .

Answer 2

Данные уже "инкапсулированы" в объекте data. Передайте этот объект в функцию, в которой вы хотите использовать данные.

Вы всегда можете создать новый объект - но какой смысл - он уже находится в объекте data.