# Custom JSON Export?

**URL:** <https://discourse.mapeditor.org/t/custom-json-export/936>\
**Category:** Questions\
**Created:** [November 23, 2015, 4:00am UTC](https://discourse.mapeditor.org/t/custom-json-export/936 "2015-11-23T04:00:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![dillybob](https://avatars.discourse-cdn.com/v4/letter/d/958977/32.png) [@dillybob](https://discourse.mapeditor.org/u/dillybob)\
**Post date:** [November 23, 2015, 4:00am UTC](https://discourse.mapeditor.org/t/custom-json-export/936/1 "2015-11-23T04:00:54Z")

</div>

Hey guys,

Just curious if it’s possible to edit a configuration file on what and how the data should be exported?

For example, I want a new array for each new row horizontally… and want to remove all the other properties that are saved, and only wanting the map data.

Thanks for reading!

---

<div class="post-metadata">

**Author:** ![bjorn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/bjorn/32/1599_2.png) [@bjorn](https://discourse.mapeditor.org/u/bjorn)\
**Post date:** [November 23, 2015, 9:13am UTC](https://discourse.mapeditor.org/t/custom-json-export/936/2 "2015-11-23T09:13:09Z")

</div>

I’ve answered this at:

[https://github.com/bjorn/tiled/issues/1140](https://github.com/bjorn/tiled/issues/1140)

---

<div class="post-metadata">

**Author:** ![dillybob](https://avatars.discourse-cdn.com/v4/letter/d/958977/32.png) [@dillybob](https://discourse.mapeditor.org/u/dillybob)\
**Post date:** [November 23, 2015, 9:46pm UTC](https://discourse.mapeditor.org/t/custom-json-export/936/3 "2015-11-23T21:46:31Z")

</div>

Yeah, great bjorn! I have followed your advice to just create my own array / data instead of trying to custom code a C++ or python plugin.

Here is my script I made to convert something like this; (Could be for any amount of layers)  
 ![](https://cdck-file-uploads-canada1.s3.dualstack.ca-central-1.amazonaws.com/flex035/uploads/mapeditor/original/1X/ae495fd1914626b3c6df0f9ebab3d068b144a8b4.png)

```auto
{
    	"data": [
    		[
    			[6, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0],
    			[0, 0, 0, 1, 0, 0, 1, 0, 100, 101, 0],
    			[0, 0, 0, 1, 0, 0, 1, 0, 115, 116, 0],
    			[6, 0, 0, 1, 0, 0, 1, 0, 0, 0, 0]
    		],
    		[
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    		],
    		[
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    		],
    		[
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    		],
    		[
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    		],
    		[
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    			[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    		]
    	]
    }

```

This is the same type of DataSet used for [play.treasurearena.com](http://play.treasurearena.com) as well if you’re looking for awesome custom maps with collision and the 3d effect.

Here is the code in JavaScript:

```auto
MapData = {TILEDMAPJSONEXPORTDATAHERE}
var NewMap = {};
	NewMap.data = []; // Create Data key and set it as an array;
	var num_layers = MapData.layers.length;
	var map_width = MapData.width;
	var map_height = MapData.height;
 
function listToMatrix(list, elementsPerSubArray) {
    var matrix = [], i, k;

    for (i = 0, k = -1; i < list.length; i++) {
        if (i % elementsPerSubArray === 0) {
            k++;
            matrix[k] = [];
        }

        matrix[k].push(list[i]);
    }

    return matrix;
}
 
	var newData = [];
	for(var i = 0; i < num_layers; i++){
       		 newData.push(listToMatrix(MapData.layers[i].data, map_width));
    }

NewMap.data = newData; // Set the data property to grab the array matrix we built.

 console.log(JSON.stringify(NewMap));

```

And here is the working demo with the tiled map export: [https://jsfiddle.net/e5yowcap/3/](https://jsfiddle.net/e5yowcap/3/)

1. Make sure you export as json format as well.

Thanks to bjorn with the idea, and also if anyone see’s this thread you’re welcome!!

---

<div class="post-metadata">

**Author:** ![bjorn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.mapeditor.org/bjorn/32/1599_2.png) [@bjorn](https://discourse.mapeditor.org/u/bjorn)\
**Post date:** [March 22, 2019, 10:41pm UTC](https://discourse.mapeditor.org/t/custom-json-export/936/4 "2019-03-22T22:41:02Z")

</div>

Reviving this topic to point out that recent Tiled development snapshots allow writing export formats in JavaScript, making it very easy to add a custom JSON export.

An example can be found at the documentation for [tiled.registerMapFormat](https://doc.mapeditor.org/en/latest/reference/scripting/#script-registermapformat):

```auto
var customMapFormat = {
    name: "Custom map format",
    extension: "custom",

    toString: function(map, fileName) {
        var m = {
            width: map.width,
            height: map.height,
            layers: []
        };

        for (var i = 0; i < map.layerCount; ++i) {
            var layer = map.layerAt(i);
            if (layer.isTileLayer) {
                var rows = [];
                for (y = 0; y < layer.height; ++y) {
                    var row = [];
                    for (x = 0; x < layer.width; ++x)
                        row.push(layer.cellAt(x, y).tileId);
                    rows.push(row);
                }
                m.layers.push(rows);
            }
        }

        return JSON.stringify(m);
    },
}

tiled.registerMapFormat("custom", customMapFormat)

```

The exact API is subject to change at least until the release of Tiled 1.3.