javascript - Using data from JSON files as references to data from other JSON files -

javascript - Using data from JSON files as references to data from other JSON files -

i trying create website tabletop game friend of mine created, , want store info in json files , pull info in html files javascript. want to, example, store each class in separate file, skill list (only listing skill name , level learned in file) included in file, , master list of skills, costs, , descriptions in file. basically, want treat 2 or more json files linked tables in database.

in example, found in class's file:

{ "name": "class 1", "skills": [ { "name": "skill 1", "level": 1 }, { "name": "skill 2", "level": 2 }, { "name": "skill 3", "level": 3 } ] }

and master skill file:

{ "skills": [ { "name": "skill 1", "desc": "this first skill.", "cost": "1 mp" }, { "name": "skill 2", "desc": "this sec skill.", "cost": "2 hp" }, { "name": "skill 3", "desc": "this 3rd skill.", "cost": "3 gold" }, { "name": "skill 4", "desc": "this skill different class.", "cost": "all mp" } ] }

and want html file output this, using these 2 separate json files:

<h1>class 1</h1> <table> <tr> <td>skill 1</td> <td>level 1</td> <td>1 mp</td> <td>this first skill.</td> </tr> <tr> <td>skill 2</td> <td>level 2</td> <td>2 hp</td> <td>this sec skill.</td> </tr> <tr> <td>skill 3</td> <td>level 3</td> <td>3 gold</td> <td>this 3rd skill.</td> </tr> </table>

can done? , if so, how?

jsbin demo

// master file $.getjson( "db/master.json", function( info ) { var masterskills = data.skills; // store master object // we've read master info let's see how many // (cause you're working arrays) // of skills has class 1 file // class 1 file $.getjson( "db/class.json", function( info ) { // collect class 1 skills (3 of them) adding info // our stored masterskills var rows = []; // array 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 info element ("body") $('<h1/>',{html: data.name }).appendto("body"); $( "<table/>", { html: rows.join("") }).appendto("body"); }); });

the above usable if sequence of both files matches array count, otherwise if want sure only right info matches exact level (in case class file has stored info in non-incremental way) you'll have alter bit json structure, prevent unnecessary loops find exact "level" match. 1 way (master file):

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

now, instead of searching trough "name" properties can straight target desired level , extract values.

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

javascript jquery json html5