2D Array in Swift Playground

Question

I'm trying to code a level generator for my game so I'm testing it out in a Swift playground. My level is stored in a 2D Swift array. Everything is great except that I can't see the array data in a useful way. Because it is level data in a tile game, I would like to see the rows and columns arranged neatly. However, the array is currently just a single line resizing to size of the console. How can I see the rows and columns lined up nicely? Here is my current output:

[[" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", " ", "&", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", "&", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", "&", " ", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]]

I can get a somewhat decent result by resizing the console but there has to be a better way to do this.

Answer 1

If you want to represent your 2D array with its contents aligned in the console, my suggestion is to make the class which holds the array conform to the protocol CustomStringConvertible.

For that you have to create a description computed property, it's where we do the formatting: we transform the inner arrays into strings and join them with a line separator.

The conformance to the protocol makes the object output the result of the computed property when it's printed.

Example:

class BigArrayRepresenter: CustomStringConvertible {

    var bigArray: [[String]] = []

    init(bigArray: [[String]]) {
        self.bigArray = bigArray
    }

    var description: String {
        return bigArray.map { String($0) }.joinWithSeparator("\n")
    }

}

Using your array:

let source = [[" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", " ", "&", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", "&", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", " ", "&", "&", "&", "&", "&", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", " ", "&", " ", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", "&", "&", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "], [" ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " ", " "]]
let representer = BigArrayRepresenter(bigArray: source)
print(representer)

We get this result:

Answer 2

You can put as many line breaks in a 2d array as you would like in order to make the data look nice:

let array = [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9] 
]

Answer 3

Answer: Write your own UIView subclass, and display it using the XCPlaygroundLiveViewable protocol.