Question

我正在尝试为我的朋友创建一个桌面游戏的网站，我想将所有数据存储在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

如果我误解了你的问题，请纠正我，但你会想做这样的事情：

将您的主json文件存储在服务器上，例如data.json。
将所有其他内容存储在同一文件中，如下所示：{"classes": [ classes go here ]}，或者将每个文件存储在单独的文件中，例如class1.json，class2.json等。
然后，使用js将文件中的数据提取到html页面，如下所示：

$.getJSON('data.json', function (data) { // do this for all your files // process your data here });
然后，在回调中，使用基本DOM操作来创建表格，例如（一个简化的例子）：

var html = $("<p>The skill's name: " + data["skills"][0]["name"]); $("#yourtable").append(html);

编辑：如果你想为每项技能做到这一点，那就像

var skills = data["skills"];
$.each(skills, function (index) {
    // do your DOM stuff here (skills[index] is your skill)
});

这将迭代每项技能，并为每一项技能做同样的事情。

编辑2：这是您要求的完整代码。

// assume class data is stored in files called [classname].json
var classname = "yourclass", masterfile = "master.json";
// fetch data from the master file
$.getJSON(masterfile, function (masterData) {
    // fetch data from your class file
    $.getJSON(classname + ".json", function (classData) {
        var skills = classData["skills"]
        // iterate over each skill in the class
        for(var i = 0; i < skills.length; i++) {
            var skill = skills[i];
            // iterate over each skill in the master file
            for(var j = 0; j < masterData["skills"].length; j++) {
                // check if the names of the skill in the class and the skill in the master file match
                if(masterData["skills"][j][name] === skill["name"]) {
                    // the skill names match
                    var s = masterData["skills"][j];
                    // s is now your skill variable, where s["cost"] is the cost, et cetera
                    // now, do your DOM manipulation using the skill data
                }
            }
        }
    });
});

Answer 2

<强> 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/

使用来自JSON文件的数据作为对来自其他JSON文件的数据的引用

2 个答案: