0

I'm trying to make my own tile-based game; a really simple one. I decided to put necessary level data into a JSON file to be read by my primitive attempt at a game engine..

{
    "tileset":"main.png",
    "layers":[
        [
            [8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ,8 ],
            [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 ],
            [3 ,3 ,3 ,3 ,2 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [1 ,1 ,1 ,1 ,5 ,0 ,0 ,0 ,0 ,0 ,0 ]
        ], [
            [1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,1 ,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 ],
            [1 ,1 ,1 ,1 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ],
            [1 ,1 ,1 ,1 ,1 ,0 ,0 ,0 ,0 ,0 ,0 ]
        ]
    ]
}

However, I'm a complete newbie to JavaScript and the like, and even jQuery is a tad bit to wrap my head around. How would I read this file and then place each of the layer's jagged arrays into their own variables?

e.g. Take the first layer array and put it into, say, var first_layer and so on and so forth

Splashsky
  • 139
  • 1
  • 9
  • 2
    Once you read the JSON from the file using [`$.ajax()`](http://api.jquery.com/jQuery.ajax/) then you can access it as you would any normal object. So, the first layer array would be `response.layers[0]`. – Rory McCrossan Jul 13 '16 at 16:51
  • I think what @Rory is also implying is that you don't want to load into multiple variables. Keep as one, referenced by the index in the array. So the row of 8's would be `response.layers[0][0]` – Jonathan Jul 13 '16 at 16:53
  • Would that work for the `$.getJSON()` function as well, since it's just a wrapper to `$.ajax()`? I attempted `var loaded = $.getJSON("game/maps/first.json"); console.log(loaded.layers[0]);` but the console told me that it was undefined, or not an object, when evaluating `loaded.layers`. – Splashsky Jul 13 '16 at 16:56
  • @Jonathan if getJSON fails silently, so will $.ajax, for the same reason. It only fails silently when the request is cross-origin and the jsonp transport is being used, which will also fail silently with $.get and $.ajax. – Kevin B Jul 13 '16 at 17:24
  • @Splashsky your json is invalid. You're missing a `[` and `]` around the array of arrays of arrays stored in the 'layers' property. – Kevin B Jul 13 '16 at 17:26
  • @Kevin if you see my answer I've already pointed out the invalid JSON. With regards to failing silently - I'm going to need to do more homework on that, and point taken. – Jonathan Jul 13 '16 at 17:31

1 Answers1

1

See this fiddle.

You could use the $.get() function that is a wrapper for the jQuery ajax function. How you process the data is up to you, I'm just punching it out for demonstration purposes.

$.get("/echo/json/", function(data) {
  var data = json; // only for fiddle
  data.layers.forEach(function(layer, index) {
    $("body").append("<ul class=\"list-unstyled layer\" data-index=\"" + index + "\"></ul>");
    layer.forEach(function(row) {
      $(".layer[data-index=" + index + "]").append("<li>" + JSON.stringify(row) + "</li>");
    });
  });
}, "json");

You would need a minor adjustment to your JSON data (the layers would need to be encapsulated in an array or else it is invalid JSON - check online).

You can change the /echo/json/ for the URL of the JSON file on your box. The data assignment would then be unnecessary (I need it because I can't use AJAX in a fiddle).

If you need me to expand on any of the techniques used please ask.

Jonathan
  • 10,936
  • 8
  • 64
  • 79
  • 1
    Why, then it wouldn't be anonymous. kinda defeats the purpose. – Kevin B Jul 13 '16 at 17:22
  • Sorry for the low-quality question... considering I'm having difficulty attempting much at all at this point, I was genuinely confused as to what I was supposed to be asking myself. As of you posting this answer, I've been able to adapt it to my needs however, with one minor exception that I imagine has something to do with variable scope... irrespective, thank you for your time and your answer. : ) – Splashsky Jul 13 '16 at 17:41
  • @Splashsky I don't think it's low quality. It's whether or not the question can be identified as a literal duplicate or as a paraphrased duplicate. You're understandably (and self-declared as) new. I think this question manages to get away with not being either. It's more the fact that it boils down to what tool to use. If there's any problems then feel free to ask :) – Jonathan Jul 13 '16 at 17:48
  • @Jonathan One question I did have was related to the data that's returned into the `$.getJSON` method when I call it. I'm using John Resig's implementation of a class-like object for the map, and so I adapted your method to work more-or-less with it. I'm now facing the problem that the data from the get request doesn't move outside that function; e.g. I call `$.getJSON("path.json", function(data) {`, then `this.map = data.layers[0];`, but it doesn't seem to push the map variable outside the scope of the callback. – Splashsky Jul 13 '16 at 17:52
  • Is there some reason you can't have a variable declared in the scope required and then just assign to it in the callback? – Jonathan Jul 13 '16 at 17:53
  • Attempted to do that as well; I defined `map: [],` in the beginning of the class. The only time I can actually access the data is apparently within the callback. This sort of trouble is why I always stuck to PHP, but I need JS for my game :P – Splashsky Jul 13 '16 at 17:55
  • @Splashsky *"but it doesn't seem to push the map variable outside the scope of the callback"* http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call – Kevin B Jul 13 '16 at 17:57
  • Alright, so that does make sense, but unfortunately I don't know how to even begin applying it. I've stared at that wall of explanation for a good twenty minutes but I'm not sure how to apply it.. – Splashsky Jul 13 '16 at 19:20