https://processing.org/reference/text_.html https://processing.org/reference/String.html https://processing.org/tutorials/text/ https://p5js.org/reference/#/p5/match https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
Let's begin by working with the simplest means of data retrieval: reading from a text file. Text files can be used as a very simple database (you could store settings for a program, a list of high scores, numbers for a graph, etc.) or to simulate a more complex data source.
In order to create a text file, you can use any simple text editor. Once the text file is in place, p5’s loadStrings() function is used to read the content of the file into a String array. The individual lines of text in the file each become an individual element in the array.
- local directory example?
A regular expression, regex or regexp (sometimes called a rational expression) is, in theoretical computer science and formal language theory, a sequence of characters that define a search pattern. Usually this pattern is then used by string searching algorithms for "find" or "find and replace" operations on strings.
We've looked at JSON files before. JavaScript Object Notation is a file type and syntax for storing hierarchical data in key:value pairs. The following example creates a JavaScript Object from scratch in the code, and then accesses it using dot syntax. For best results with loading data, run these examples from a .js file with a local server!
This is already working with the JSON format. However, often we'll receive JSON data in the form of object arrays or saved as standalone .json files. JSON files contain only information that can be loaded as an object by JavaScript -- they themselves do not contain any code. Since the contents of a JSON file are an object, they are wrapped in curly brackets { }. It's important that your JSON file is formatted correctly. You can check it with any number of free online services.
The text box below contains the entire contents of a file called car.json in the assets folder.
{
"name" : "volkswagen",
"model" : "beetle",
"year" : 1971,
"color" : color(245, 20, 0)
}
We can load that into our code using the loadJSON() function. It works a lot like loadImage() or loadTable().
Corpora is a GitHub project that collects datasets in JSON format. You'll notice that these json files are much larger than our simple example. Also, they contain arrays of elements, indicated by brackets [ ]. For example, Corpora's donkeys.json looks like this:
{
"donkeys":[
"Abkhazskaya",
"Abyssinian Donkey",
"Algerian",
"Xinjiang",
"Yangyuan",
"Yunnan",
"Zamorano-Leonés"
]
}
But arrays can also contain arrays of objects (composed of key:value pairs), like this:
{
"countries": [
{
"name":"Afghanistan",
"capital":"Kabul"
},
{
"name":"Albania",
"capital":"Tirana"
},
{
"name":"Zambia",
"capital":"Lusaka"
},
{
"name":"Zimbabwe",
"capital":"Harare"
}
]
}
So how would we access a specific property in JavaScript? If we had loaded the .json file using something like let data = loadJSON(countries.json), then we can retrieve information by accessing its path using dot syntax: data.countries[0].capital which would return "Kabul", the capital of the first element [0] of the array of countries.
Navigate to the character archetypes data, copy the data and save it locally as "exercise_07/assets/character.json" or something similar. How can we create a loop to print out each archetype? (The following code won't work in the browser -- try pasting it into "exercise_07/script.js"). This will simply load the dataset and allow us to visualize it in the console.
let data;
function preload() {
data = loadJSON('assets/characters.json');
}
function setup() {
noCanvas();
print(data);
}
What if we want to print out the name of each archetype? We can introduce a for() loop to iterate through each.
let data;
function preload() {
data = loadJSON('assets/characters.json');
}
function setup() {
noCanvas();
let characters = data.characters; // remove one layer of hierarchy
for (let i = 0; i < characters.length; i++){
print(characters[i].name);
}
}
Notice that each character object contains its own array of qualities. Let's make a nested for() loop to print out the contents of those arrays. Remember we have to use a different variable than i because it's already in use within this scope. See if you can use string concatenation to write a complete sentence about each character.
let data;
function preload() {
data = loadJSON('assets/characters.json');
}
function setup() {
noCanvas();
let characters = data.characters; // remove one layer of hierarchy
for (let i = 0; i < characters.length; i++){
print(characters[i].name);
for (let j = 0; j < characters[i].qualities.length; j++){
print(" - " + characters[i].qualities[j]);
}
}
}