For this API assignment, I wanted to create some sort of artist follower visualization. So I looked up API documentations for SoundCloud, Spotify, Songkick, and Bandsintown. I requested my API keys and only Bandsintown got back to me. I was able to get different artist information and artist event in json on their public API. However, as i tried to access the same json URL(var url = 'https://rest.bandsintown.com/artists/stimming?app_id=09f313e072cd1b192f200fb70df19ea5') I opened it on the browser on P5 editor, it was always giving me Script error. (: line 0). I changed my editor and same problem still persisted. I couldn't figure out what was the issue, so I decided to manually importing a selection of artists json files to my editor. My original goal was to have user input artist names, the input would locate artists' tracker counts in Bandsintown database, and then have the tracker count draw many little stick figures on the canvas. The more the tracker count, the more figures. I uploaded a few json files of artists information: darke, sia, joji. And in preload, I had drake = loadJSON("json/drake.json"); joji =loadJSON("json/joji.json");... I wanted to access the artist tracker count by: drake.tracker_count. However I couldn't figure out how to convert a user input string "drake" back to variable drake. So I thought about combining individual artist files into one big artists json file with individual artist object labeled by artist names in strings: "drake", "sia"... and access the tracker_count through artists.artists[input.value()].tracker_count, which was an expression I saw in this documentation.
Basically I can access the object values by using the dot(.) notation as well as bracket ([]) notation, which solved my problem.
myObj = { "name":"John", "age":30, "car":null }; x = myObj.name; // x = myObj["name"];
My code: https://editor.p5js.org/ada10086/sketches/HyeGPQI2X
To interact: https://editor.p5js.org/ada10086/full/HyeGPQI2X