javascript - 解析 JSON 数据，然后将其所有值传递给另一个函数

Question

我正在建立这个网站:http://collections.design

它的工作方式是使用 jQuery(我不太了解 javascript)从 JSON 读取所有工具数据。然后，您可以单击一个项目，然后会打开一个侧面板，其中包含更多信息。但是有很多重复的代码，所以我正在尝试对其进行一些优化。

首先我解析 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 解析时“封装”所有变量，然后将其作为参数传递给其他函数；最后，单独读取另一个函数中的每个值？

我尝试使用数组。但没有成功，同时记住我正在努力简化事情，不重复自己，并保留简短的名称......

也许我要求太多，但任何指向文档的指针或链接将不胜感激。

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)正如Sam Ax所说，将数据直接传递给函数

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

Here's a working fiddle .