CodingForums.com - Saving a Multidimensional Array into an XML using JavaScript

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Saving a Multidimensional Array into an XML using JavaScript (http://www.codingforums.com/showthread.php?t=269943)

Saving a Multidimensional Array into an XML using JavaScript

So I have a multidimensional array that looks like this:

Code:

    var map = [[0, 0, 0, 0, 0, 0, 0],

                          [0, 3, 0, 0, 2, 0, 0],

                         [0, 0, 0, 0, 4, 0, 4],

                         [0, 0, 0, 0, 5, 0, 5],

                         [0, 0, 0, 0, 0, 0, 1],

                         [0, 0, 2, 5, 0, 0, 0],

                         [0, 0, 0, 2, 0, 0, 0],

                          [0, 4, 0, 0, 0, 0, 0],

                         [0, 0, 0, 0, 0, 0, 0]];

And i would like to save it into my XML file.

My XML file looks like the following:

Code:

   <TileMaps>

    <Level> <!-- Level 1  -->

    <map>[[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],

                      [1, 3, 2, 4, 0, 0, 0, 0, 0, 1],

                      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]</map>

    </Level>

    <Level> <!-- Level 2  -->

    <map>[[1, 1, 1, 1, 1, 1, 1, 1, 1, 1],

                      [1, 3, 2, 4, 0, 0, 0, 0, 0, 1],

              [1, 0, 2, 4, 0, 0, 0, 0, 0, 1],

                      [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]</map>

    </Level>

    </TileMaps>

So when i add the array i would like it to be placed within the XML file within the:

Code:

<Level><map> ARRAY HERE </map></Level>

How would i be able to add the map variable from the Javascript into a <map></map> node within the XML file? I would need to be able to return the <map> number aswel. For example if i already had 4 <level><map>[[0,0],[0,0]]</map></level> then i would need to add it to the end of those and return the number 5 to show thats what the level number is.

Thanks

JavaScript has no ability to WRITE to files.

Not 100% true; MSIE can write to files ON THE USER'S COMPUTER (only), but only if the user marks your site as being a "safe" site and only if he/she agrees to let your page run an "unsafe for scripting" ActiveX control.

But even here, the JS code is only writing to the USER's computer. No matter what, JavaScript has no ability to write to files ON THE SERVER, which is surely what you would want to do for your map game.

You will need server-side code (PHP/ASP/JSP) to do this. And then the JavaScript code *can* send the data to the server and let the server do the file writing.

Go with whatever server side you're using, if at all possible. It will have no problem writing to the file. You have to open the file for writing, you can make a template file for the heading, copy it to the folder you want it in, with rename, write what you want to it, and append the closing tags. Done.

Actually, if the server side system you are using understands XML well, you can load the XML file into an XML document, *append* the new <Level> with its subnodes, and then write the XML document back out as XML text. Trivial to do in ASP.NET or JSP. Not very hard to do in classic ASP. You then don't have to parse the XML in the file by hand to try and find the closing tag.

(I don't use PHP, so I don't know where this is easy or hard there. If it's not easy--assuming you have the right libraries--I would be surprised.)

Quote:

Originally Posted by Old Pedant (Post 1259110)

JavaScript has no ability to WRITE to files.

But since this is such a fun exercise, let us assume a few things here:
- The OP is another victim of the ambiguous JavaScript != JScript
- The OP has control over the server and is able to flag server directories as writable
- The deployment server supports classic ASP (and thus JScript (which is *remarkably* similar to JavaScript))
- Only 1 user at a time can access the "savemapdata" page (it is not a data base, although i leave that as and exercise for the better qualified)

inc/json.asp

Code:

<%

        // thanks of course to Old Pedant

    var Clone = function (a) {if(null==a||"object"!=typeof a)return [];var c=a.constructor(),b;for(b in a)a.hasOwnProperty(b)&&(c[b]=a[b]);return c};

/*

here is where you would include JSON i believe the version i use can be found here

https://github.com/douglascrockford/JSON-js/blob/master/json2.js



    See http://www.JSON.org/js.html



    This code should be minified before deployment.

    See http://javascript.crockford.com/jsmin.html

*/

%>

inc/maps.asp

Code:

<%

var maps = [

    {

        level:1,

        terrain:[

            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],

            [1, 3, 2, 4, 0, 0, 0, 0, 0, 1],

            [1, 0, 2, 4, 0, 0, 0, 0, 0, 1],

            [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

        ]

    }

];

%>

savemapdata.asp

Code:

<%@LANGUAGE="JavaScript"%><!--Dont let the name fool ya...-->



  <!--#include file="inc/json.asp"-->

  <!--#include file="inc/maps.asp"-->

<%

        //retrieve array in object notation

    mapFromURL = new String(Request("map")).replace(/[^\[\]\,0-9]/g,'');

    levelFromURL = new String(Request("level")).replace(/[^0-9]/g,'');



    var FSO = new ActiveXObject("Scripting.FileSystemObject")

    var ForReading = 1, ForWriting = 2, ForAppending = 3;



    maps.push(

        {

            map:JSON.parse(mapFromURL) ,

            level:levelFromURL

        }

    );

    var MapsFileObj = FSO.OpenTextFile('inc/maps.asp' , ForWriting);



    MapsFileObj.WriteLine('<' + '%')

    MapsFileObj.WriteLine('maps = ' + JSON.stringify(maps));

    MapsFileObj.WriteLine('%' + '>');

    MapsFileObj.Close();

%>

maps.asp (outputs xml data...)

Code:

<%@LANGUAGE="JavaScript"%>

  <!--#include file="inc/maps.asp"-->

  <!--#include file="inc/json.asp"-->



<%

    var FilteredMaps = [];

    var Levels = '' , write =  function (d){Levels+=d+'\n'};



    for (var i=0 , ii = maps.length ; i<ii ; ++i) {

        FilteredMaps[maps[i].level] = Clone(maps[i]);                // read only the most recent version of the map, conversly one might only save one version of each level... but let's say that we intentionally allowed the level versions to co-exist for historical reasons

    }



    for (var i=0 , ii = FilteredMaps.length ; i<ii ; ++i) {



        if (FilteredMaps[i].terrain===undefined)                // or some other hiddeous malformation...

            continue;



        write('    <Level> <!-- Level ' + i + '  -->');                // Automation is no excuse for sloppy formatting ;)

        write('      <map level="' + i + '">');

        write('        '  + JSON.stringify(FilteredMaps[i].terrain));

        write('      </map>');

        write('    </Level>');

   }

%>

  <TileMaps>

<%=Levels%>

  </TileMaps>

now all you need is a form to populate the URL variables (or you could link to the page "savemapdata.asp?level="+JSON.stringify(levelNum)+"map="+JSON.stringify(mapData)" from your javascript)

At a second glance I suppose the savemapdata.asp and maps.asp could be combined to produce an actual .xml as requested...

savemapdata.asp

Code:

<%@LANGUAGE="JavaScript"%>



  <!--#include file="inc/json.asp"-->

  <!--#include file="inc/maps.asp"-->

<%

        //retrieve array in object notation

    mapFromURL = new String(Request("map")).replace(/[^\[\]\,0-9]/g,'');

    levelFromURL = new String(Request("level")).replace(/[^0-9]/g,'');



    var FSO = new ActiveXObject("Scripting.FileSystemObject")

    var ForReading = 1, ForWriting = 2, ForAppending = 3;



    maps.push(

        {

            map:JSON.parse(mapFromURL) ,

            level:levelFromURL

        }

    );

    var MapsDataFileObj = FSO.OpenTextFile('inc/maps.asp' , ForWriting);



    MapsDataFileObj.WriteLine('<' + '%')

    MapsDataFileObj.WriteLine('maps = ' + JSON.stringify(maps));

    MapsDataFileObj.WriteLine('%' + '>');

    MapsDataFileObj.Close();





    var FilteredMaps = [];

    var Levels = '' , write =  function (d){Levels+=d+'\n'};



    for (var i=0 , ii = maps.length ; i<ii ; ++i) {

        FilteredMaps[maps[i].level] = Clone(maps[i]);                // read only the most recent version of the map, conversly one might only save one version of each level... but let's say that we intentionally allowed the level versions to co-exist for historical reasons

    }



    for (var i=0 , ii = FilteredMaps.length ; i<ii ; ++i) {



        if (FilteredMaps[i].terrain===undefined)                // or some other hiddeous malformation...

            continue;



        write('    <Level> <!-- Level ' + i + '  -->');                // Automation is no excuse for sloppy formatting ;)

        write('      <map level="' + i + '">');

        write('        '  + JSON.stringify(FilteredMaps[i].terrain));

        write('      </map>');

        write('    </Level>');

   }



    var MapsXMLFileObj = FSO.OpenTextFile('inc/maps.xml' , ForWriting);

    MapsXMLFileObj.WriteLine('  <TileMaps>');

    MapsXMLFileObj.WriteLine(Levels);

    MapsXMLFileObj.WriteLine('  <\/TileMaps>');

    MapsXMLFileObj.Close();

%>

Gee, that was fun :D
anyway, my batteries are dying, I hope I didn't miss anything. I tested all those pages individually (except the last) so they should work in concert.

Here's my solution, it uses PHP in the backend, and JSON, so you'll want to modify your server side code as appropriate (if you wrap the JSON in XML, you'll also need to adjust the syntax in the AJAX pieces)...oh, depending on your target user, you'll want to add some validation to the inputs (both client and server side):

PHP Code:


		
			
<?php
if($_REQUEST['level']&&$_REQUEST['map']){
    $file=file_get_contents('levels.txt'); //get the existing content
    $json=json_decode($file); //convert it from string to object
    $tilemaps=$json->tilemaps;
    $tilemaps->$_REQUEST['level']=json_decode($_REQUEST['map']);
    $o['tilemaps']=$tilemaps;
    $str=json_encode($o);
    $pos=fopen('levels.txt','w');
    fwrite($pos,$str);
    fclose($pos);
}
else{
    header('content-type:application/json');
    echo file_get_contents('levels.txt');
}
?>



<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Maker</title>
<style>
#can{width:300px; height:90px; display:block; background-color:#666;}
</style>
</head>
<body>
Which level do you want:<input type="text" id="level_request" value="level1"/><button onclick="init()">Go</button>
</body>
<script>
function saveLevel(){
ajax=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
name=document.getElementById('level_name').value; //this grabs the content in the Level Name field
if(name.length>0){
    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4&&ajax.status==200){
            alert('Level saved');
        }
    }
    params='level='+name+'&map='+JSON.stringify(map); //this constructs the message to send, consisting of the name and map
    ajax.open("POST","levels.php",true); //this is the file you will be POSTing a message to
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    ajax.setRequestHeader("Content-length", params.length);
    ajax.setRequestHeader("Connection", "close");
    ajax.send(params);
    }
}
var blocksize=30;
var map=[[1,1,1,1,1,1,1,1,1,1],[1,3,0,0,0,0,2,4,0,1],[1,1,1,1,1,1,1,1,1,1]];
var can;
var ctx;

function init(){
    ajax=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP"));
    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4){ //this test whether the request is complete
            l=document.getElementById('level_request').value;
            document.body.innerHTML='Level Name:<input type="text" id="level_name" /><br/><canvas id="can" width="300" height="90"></canvas><br/><button onclick="saveLevel()">Save</button>'; //this replaces the initial form
            can=document.getElementById('can')
            if(can){ctx=can.getContext('2d');}

            if(ajax.status==200){ //this test whether it was successful
                m=JSON.parse(ajax.responseText);//this overwrites the existing map with the received data
                console.log(m);
                map=m.tilemaps[l];
                for(y=0;y<map.length;y++){
                    for(x=0;x<map[y].length;x++){
                        draw(y,x);
                    }
                }
                can.addEventListener('click',builder);
            }
            else{ //this is what we do if the request is done and it was a failure
                for(y=0;y<map.length;y++){
                    for(x=0;x<map[y].length;x++){
                        draw(y,x);
                    }
                }
                can.addEventListener('click',builder);
                alert('Something went wrong, loading default level');
            }

        }
    }
    ajax.open("GET","levels.php?level="+document.getElementById('level_request').value,true);
    ajax.send();

}
function builder(e){
    if (e == null) {e = window.event;}
    x = e.clientX; //where the click was
    y = e.clientY;
    offsetX = ExtractNumber(can.offsetLeft);//where the canvas is
    offsetY = ExtractNumber(can.offsetTop);
    x_grid=Math.floor((x-offsetX)/blocksize); //which block in the canvas was clicked
    y_grid=Math.floor((y-offsetY)/blocksize);
    map[y_grid][x_grid]++;
    if(map[y_grid][x_grid]>4){map[y_grid][x_grid]=0;}
    draw(y_grid,x_grid);
}

function draw(y,x){
    kind=map[y][x];
    switch(kind){
        case 0:
            ctx.drawImage(floorimg,x*blocksize,y*blocksize);
        break;
        case 1:
            ctx.drawImage(wallimg,x*blocksize,y*blocksize);
        break;
        case 2:
            ctx.drawImage(blockimg,x*blocksize,y*blocksize);
        break;
        case 3:
            ctx.drawImage(playerimg,x*blocksize,y*blocksize);
        break;
        case 4:
            ctx.drawImage(goalimg,x*blocksize,y*blocksize);
        break;
    }
}

function ExtractNumber(value){
    var n = parseInt(value);
    return n == null || isNaN(n) ? 0 : n;
}
var floorimg=new Image();
floorimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAE5JREFUeNpiNDU1ZaANYAHiadOmEaM0KysLSOaCSYJg8rRpTAw0A6NGjxo9avQIMJqRdiUfDV3NQlI5SVIJPJpCRo0eNXrU6EFaqAIEGABIow4bXRyDLQAAAABJRU5ErkJggg==';
var wallimg=new Image();
wallimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEFJREFUeNpirK+vZ8AGGhsbcUkRqYaJgWZg1Gj6AUZIFFOeHjDVjEbjcEoho2XIaAoZLUNGU8hoGTKaQmgAAAIMAJeMK58/yjg2AAAAAElFTkSuQmCC';
var blockimg=new Image();
blockimg.src='data:image/png;base64,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';
var playerimg=new Image();
playerimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAATdJREFUeNpiNDU1ZaANYAHiadOm4ZLGZfGi+fPxmzt52jQWPNJAc/8rKSGLMN679//+ThBD0Z2g6UwMNAM0NJqFVA3AoCAmrAkbDQxcUiOQgNGQhGHc+QpTKi5RjMgEw4LVXKyGQgBE6my5GFwNkF1VW9vc0MDMzIwvGvGbi2wB0EQ4+8mTJ4kpKTRJIRDXFJWU4DSaSCdjOhzCffP2bVxiIk3SNZqzaJxlsrKyqGjiZFhhR2NX58JcjRwJZANIEQ0MiSFS8iGnRXSjgUUBmjR+g5BTG0Tj6dOnqexqiLknTpzAFyBEOhyteAKSJ0+eRCueWLCWkJCSE2umh1uM7ALkcCBQXkPKX6xFM1ZTyKllMGt0SC1BjAUk142wxoIpQdOHX2MBGJmMGKUKpLFATFgz0q45CRBgAHQ6gQd/qFgwAAAAAElFTkSuQmCC';
var goalimg=new Image();
goalimg.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAIAAAC0Ujn1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAFtJREFUeNpilJSUZKANYAFiGRkZqpv75MkTJgaagWFv9BMwGA2QUaNHttEsmPmCYMbBJYVWzNHR1XgKWIh7iS+BR1PIqNEjIaPjAaQ2V0bDGktYk9S6IB4ABBgADi4U6URvDncAAAAASUVORK5CYII=';
</script>
</html>

Best Regards,
Navin Patel