javascript - 使用 JSON 文件中的数据作为对其他 JSON 文件中数据的引用

Question

我正在尝试为我的 friend 创建的桌面游戏制作一个网站，我想将所有数据存储在 JSON 文件中，并使用 Javascript 提取 HTML 文件中的数据。例如，我想将每个类别存储在一个单独的文件中，其技能列表(仅列出该文件中学习的技能名称和级别)包含在文件中，以及所有技能的主列表，其成本及其另一个文件中的描述。基本上，我想像数据库中的链接表一样处理两个或多个 JSON 文件。

在此示例中，可以在类的文件中找到以下内容:

 {
        "name": "Class 1",
        "skills": [
            {
                "name": "Skill 1",
                "level": 1
            },
            {
                "name": "Skill 2",
                "level": 2
            },
            {
                "name": "Skill 3",
                "level": 3
            }
        ]
    }

这是主技能文件:

    {
        "skills": [
            {
                "name": "Skill 1",
                "desc": "This is the first skill.",
                "cost": "1 MP"
            },
            {
                "name": "Skill 2",
                "desc": "This is the second skill.",
                "cost": "2 HP"
            },
            {
                "name": "Skill 3",
                "desc": "This is the third skill.",
                "cost": "3 Gold"
            },
            {
                "name": "Skill 4",
                "desc": "This is a skill from a different class.",
                "cost": "All MP"
            }
        ]
    }

我希望 HTML 文件使用这两个单独的 JSON 文件输出类似这样的内容:

<h1>Class 1</h1>
    <table>
        <tr>
            <td>Skill 1</td>
            <td>Level 1</td>
            <td>1 MP</td>
            <td>This is the first skill.</td>
        </tr>
        <tr>
            <td>Skill 2</td>
            <td>Level 2</td>
            <td>2 HP</td>
            <td>This is the second skill.</td>
        </tr>
        <tr>
            <td>Skill 3</td>
            <td>Level 3</td>
            <td>3 Gold</td>
            <td>This is the third skill.</td>
        </tr>
    </table>

这可以做到吗？如果是这样，怎么办？

Answer 1

<强> jsBin demo

// GET MASTER FILE
$.getJSON( "db/master.json", function( data ) {

  var masterSkills = data.skills; // Store master Object
  // Now that we've read the master data let's see how many 
  // (cause you're working with Arrays)
  // of those skills has the Class 1 file

  // GET Class 1 FILE
  $.getJSON( "db/class.json", function( data ) {

     // Collect Class 1 skills (3 of them) adding data from
     // our stored masterSkills

     var rows = []; // Array to create rows
     $.each( data.skills, function( i, val ) { // 3 of them
       rows.push( "<tr>"+
                "<td>"+ val.name +"</td>"+
                "<td>Level "+ val.level +"</td>"+
                "<td>"+ masterSkills[i].cost +"</td>"+
                "<td>"+ masterSkills[i].desc +"</td>"+
                "</tr>" );
     });

     // Append collected data do some element ("body")
     $('<h1/>',{html: data.name }).appendTo("body");
     $( "<table/>", { html: rows.join("") }).appendTo("body");
  }); 

});

仅当两个文件的序列与数组计数匹配时，上述内容才可用，
否则，如果您想确保仅获取与确切级别匹配的正确数据(如果您的类文件以非增量方式存储数据)，您必须稍微更改 JSON 结构，以防止不必要的循环来找到精确的“级别”匹配。一种方法是(主文件):

{
  "skill1" : {
     "foo":"bar" 
  },
  "skill2" : {
     "blu":"bla"       
  },
}

现在，您可以直接定位所需级别并提取值，而无需搜索所有“名称”属性。

http://api.jquery.com/jquery.getjson/