Блог

Я пытаюсь создать веб-сайт для настольной игры, созданной моим другом, и я хочу хранить все данные в файлах JSON и извлекать данные в HTML-файлах с помощью Javascript. Я хочу, например, сохранить каждый класс в отдельном файле, включив в файл его список навыков (в котором указаны только имя навыка и уровень, изученный в этом файле), а также основной список всех навыков, их стоимость и их описания в другом файле. В принципе, я хочу обрабатывать два или более файлов 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>
  

Можно ли это сделать? И если да, то как?

Демонстрация JSBin

 // 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"       
  },
}
  

теперь вместо поиска по всем свойствам «name» вы можете напрямую настроить целевой уровень и извлечь значения.

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

Пожалуйста, поправьте меня, если я неправильно понял ваш вопрос, но вы захотите сделать что-то вроде этого:

1. Сохраните ваш основной файл json на сервере, например data.json .
2. Либо храните все остальное в том же файле, например, так: {"classes": [ classes go here ]} , или каждый в отдельном файле, например class1.json , class2.json , и т.д.

3. Затем используйте js для извлечения данных из файлов на вашу html-страницу, например:

   $.getJSON('data.json', function (data) { // do this for all your files
// process your data here
});

4. Затем в обратных вызовах используйте базовые манипуляции с 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
                }
            }
        }
    });
});