8.5: Working with APIs in Javascript – p5.js Tutorial




This video demonstrates how to work with an API. The example uses open weather map. How do you form an API query? How do you get an API key? How do you use the JSON data the API sends you back? Oh, and what is an API?

All examples: https://github.com/shiffman/Video-Lesson-Materials

Contact: https://twitter.com/shiffman

Next video:

JavaScript basics:

HTML/CSS basics:

Full Data playlist:

Help us caption & translate this video!

http://amara.org/v/QbuE/

Original source


47 responses to “8.5: Working with APIs in Javascript – p5.js Tutorial”

  1. Just wanted to let you know, you have the best stuff I have seen to explain APIs. I did not begin to comprehend the concepts until I started watching your videos. Thanks for putting this out there.

  2. Better Example would be getting random wallpapers like I did in a project there a reaaally big free open API without need for keys, just google random wallpaper api 😀 Just saying, because there you wouldnt have to log in to request data..

  3. Daniel, great videos! Thank you so much!

    Daniel, I have GeoJson file from which I need to eliminate the initial tags {"type"=FeatureCollection"… Basically I would like to extract the "features" attribute and turn it into a CSV. Any suggestions? Tutorials? Thanks in advance!

  4. you are awesome sir… absolutely awesome, please made tutorial for Javascript…. like from scratch without p5 please please please,,, then jquery then angular .. be my Library sir.. if there is anything where i have to pay please let me for your paid channel because you are awesome…

  5. Hi Dan thank you so much for making these coding tutorials so creatively and entertaining!!! I have not yet managed to fall asleep..haha. I have a question on how to catch errors when there's some sort of failure using loadJSON. Similar to what $.ajax has like this:

    $.ajax({
    url: "lines.txt", // path to file
    dataType: 'text', // type of file (text, json, xml, etc)
    success: function(data) { // callback for successful completion
    $("#sentences").html(data);
    },
    error: function() { // callback if there's an error
    alert("error");
    }
    });

    });

  6. Nice video,! it has great learning material and the visual effect of you being inside the screen plus your step by step guidance and your going-openly-through-the-process makes it feel familiar and interesting.Thanks!!

  7. Hi Daniel, I am going nuts cause I am trying to use this with Node.Js and it's telling me that the loadJSON(); function doesn't exist… is loadJSON a native Js function or is it something that you coded to get the JSON data from the server or a library or something? …I'm honestly starting to feel dumb xd HEEEEEEEEEELP PLEASEEEEE ;w;

  8. PLEASE HELP ANYONE!! how do you access an API's response with an integer as its object, example data.results.0;
    When I try this, it brings up an error in my console log of (Uncaught SyntaxError: Unexpected number)… please help…

  9. class ViewController: UIViewController,UITableViewDataSource,UITableViewDelegate {

    @IBOutlet weak var tableView: UITableView!

    override func viewDidLoad() {

    super.viewDidLoad()

    self.tableView.hidden = true

    self.parseJson()

    // Do any additional setup after loading the view, typically from a nib.

    }

    override func didReceiveMemoryWarning() {

    super.didReceiveMemoryWarning()

    // Dispose of any resources that can be recreated.

    }

    var country: String = ""

    var capital: String = ""

    var latitude: Double = 0.0

    var longitude: Double = 0.0

    var output:NSArray!

    func parseJson(){

    if let path = NSBundle.mainBundle().pathForResource("capitals", ofType: "json") {

    do {

    let jsonData = try NSData(contentsOfFile: path, options: NSDataReadingOptions.DataReadingMappedIfSafe)

    do {

    let jsonResult: NSDictionary = try NSJSONSerialization.JSONObjectWithData(jsonData, options: NSJSONReadingOptions.MutableContainers) as! NSDictionary

    for (key,value) in jsonResult

    {

    if key as! String == "Results"

    {

    output = value as! NSArray

    }

    }

    // for item in output

    // {

    //

    // capital = item["Capital"] as! String

    // latitude = item["Latitude"] as! Double

    // longitude = item["Longitude"] as! Double

    //

    // }

    //

    dispatch_async(dispatch_get_main_queue()){

    self.tableView.hidden = false

    self.tableView.reloadData()

    }

    // print(output)

    } catch {}

    } catch {}

    }

    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {

    let cell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath)

    var country:[String] = []

    //var capital: [String] = []

    for item in output

    {

    //print(item["Country"]!)

    //country.append(item["Country"] as! String)

    country.append(item["Capital"] as! String)

    }

    cell.textLabel?.text = country[indexPath.row]

    //cell.detailTextLabel?.text = capital[indexPath.row]

    return cell

    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {

    print(output!.count)

    return output!.count

    }

    }

  10. Hey, loved this video! You said, "Look at me! 10 minutes in…" and I had to check the progress bar because I couldn't believe it had been 10 minutes already! Most other tutorials feel like they take forever but yours are extremely interesting and you're fun to watch! Thanks for the awesome tut because I've been stuck on this for weeks hahahah

Leave a Reply