• Tuesday , 28 January 2020

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

Code Canyon



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

3d Ocean

Related Posts

47 Comments

  1. Topsoil Depletion Awareness
    May 11, 2017 at 14:54

    If you were to move your code in setup() would you still need if(weather)?

  2. Jimmy Liao
    May 11, 2017 at 14:54

    Can you change the response of API? Does it work on PHP? Please help…

  3. Sarah Kerrigan
    May 11, 2017 at 14:54

    The real content starts at 12:10

  4. Vialli Novelo
    May 11, 2017 at 14:54

    nice tutorial… really cought my attention and learn something to be a beginner..thanks

  5. Mehdi Azhar
    May 11, 2017 at 14:54

    You're awesome

  6. Chaaos2
    May 11, 2017 at 14:54

    You're awesome dood thanks for all your great videos! Love your style yo!

  7. Engineer Passion
    May 11, 2017 at 14:54

    very nice

  8. Uzoma Acholonu
    May 11, 2017 at 14:54

    finally a video with info i can use. WELL DONE!

  9. Keshav Raj Sharma
    May 11, 2017 at 14:54

    Thank you

  10. CrescentFresh
    May 11, 2017 at 14:54

    Do you ever do talks? I need to witness you in person sharing your knowledge! Incredible teacher.

  11. lpsupa1
    May 11, 2017 at 14:54

    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.

  12. Santiago Orihuela
    May 11, 2017 at 14:54

    Hi Daniel, PLEASE PLEASE help us with the Instagram API. Teach us how to use it, there are no YouTube tutorials at all …..THANK YOU!!!!

  13. Colin Pfingstl
    May 11, 2017 at 14:54

    How can you loadJSON when you don't have p5, what do I have to install?

  14. Jeremy Sutton
    May 11, 2017 at 14:54

    Thank you, very helpful video.

  15. mcNogard
    May 11, 2017 at 14:54

    Why would anyone include "I'm looking for" in their searches?

  16. kedar kodgire
    May 11, 2017 at 14:54

    This was the best explanation I ever seen for Api's.

  17. xXUnknown0816Xx
    May 11, 2017 at 14:54

    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..

  18. Kristofer Padilla
    May 11, 2017 at 14:54

    Very helpful. Thanks!

  19. Nicolas Ibarra
    May 11, 2017 at 14:54

    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!

  20. Peter Bode
    May 11, 2017 at 14:54

    Great API-usage tutorial!

  21. Ghast Iconoclast
    May 11, 2017 at 14:54

    11:00 Ctrl-F "temperature"!

  22. Arun kumar
    May 11, 2017 at 14:54

    Excellent Tutorial.Thank You!

  23. Shamiso Mutasa
    May 11, 2017 at 14:54

    i love this guy!!! I love you!!!!!!!! Thank you thank you thank you!!!!!

  24. yogesh Tiwari
    May 11, 2017 at 14:54

    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…

  25. shirong foo
    May 11, 2017 at 14:54

    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");
    }
    });

    });

  26. Saurav Bhagat
    May 11, 2017 at 14:54

    Awesome video and really helpful!! Thanks

  27. Yuritzin Valdez
    May 11, 2017 at 14:54

    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!!

  28. Cheeseburger
    May 11, 2017 at 14:54

    I'd hug you if I could, Dan. Thanks for the series so far!

  29. Yağmur Uyanık
    May 11, 2017 at 14:54

    You have no idea how helpful these videos are. Thank you very very very much.

  30. Samiron Barai
    May 11, 2017 at 14:54

    Perfect teaching style and the best tutorial about API.
    Your new subscriber 🙂

  31. Husain Ahmmed
    May 11, 2017 at 14:54

    Awesome tutorial.

  32. Hesham Ismail
    May 11, 2017 at 14:54

    i am trying to load json data on codepen but it doesn't work, any tips.
    $.getJSON(api_test_v2, getdata, 'jsonp'); i tried with jsonp and without nothing changed

  33. Felipe Marelli
    May 11, 2017 at 14:54

    im working with an API that returns an image, how do i display it?

  34. Anonymous faggot
    May 11, 2017 at 14:54

    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;

  35. Dipal Gudhka
    May 11, 2017 at 14:54

    Hello Daniel,

    How do you do this with geolocation in processing? I've been trying to use navigator.geolocation.getCurrentPosition. But I guess I'm not following the right rules.

  36. Arber Shabani
    May 11, 2017 at 14:54

    this was a hell of a video, everything is much simpler now 😀

  37. Rajat sharma
    May 11, 2017 at 14:54

    if someone tell me ,which code editor he used ?

  38. ayo odifa
    May 11, 2017 at 14:54

    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…

  39. Aaron Croussore
    May 11, 2017 at 14:54

    im curious why you use a mac per. to a pc?

  40. Fall season
    May 11, 2017 at 14:54

    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

    }

    }

  41. Mathew Morris
    May 11, 2017 at 14:54

    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

  42. Javajavajava
    May 11, 2017 at 14:54

    This is definitely among my favorite programming channels on YouTube. I love the enthusiasm in your videos. Keep it up!

  43. darren harder
    May 11, 2017 at 14:54

    the explanation of when we are watching this was fantastic !!!great videos !!

  44. Kamil Aqil
    May 11, 2017 at 14:54

    what library is loadJSON a part of ?

  45. Miguel Myers
    May 11, 2017 at 14:54

    i love this guy! you keep it so real with your audience. My coding bootcamp was doing soundcloud api today, and i just wanted to cry. thats how i find myself here

  46. Mensur Grišević
    May 11, 2017 at 14:54

    I love your videos! But the sidenavigation on https://p5js.org/examples/ is mildly disturbing and the top position calculation is not correct 😀

Leave A Comment

You must be logged in to post a comment.