title
10.3: What is JSON? Part II - p5.js Tutorial

description
This video covers additional JSON (JavaScript Object Notation) scenarios? How are objects nested within objects? What is a JSON array? All examples: https://github.com/shiffman/Video-Lesson-Materials Contact: https://twitter.com/shiffman Next video: https://youtu.be/6mT3r8Qn1VY JavaScript basics: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA HTML/CSS basics: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6bI1SlcCRfLH79HZrFAtBvX Full Data playlist: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6a-SQiI4RtIwuOrLJGnel0r Help us caption & translate this video! http://amara.org/v/QbuG/ 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '10.3: What is JSON? Part II - p5.js Tutorial', 'heatmap': [{'end': 584.431, 'start': 539.494, 'weight': 0.728}, {'end': 698.47, 'start': 682.259, 'weight': 0.706}], 'summary': 'Tutorial series consists of three chapters: handling json data, navigating and retrieving data from json, and displaying json data. it covers the necessity of handling complex json data, navigating through json files, and displaying json data in a web page, providing guidance on accessing, manipulating, and practicing with diverse data sources.', 'chapters': [{'end': 352.777, 'segs': [{'end': 45.5, 'src': 'embed', 'start': 0.874, 'weight': 0, 'content': [{'end': 5.997, 'text': "Hello So I'm now in part two of this discussion about working with JSON data.", 'start': 0.874, 'duration': 5.123}, {'end': 9.278, 'text': 'And in the previous video I looked at this thing.', 'start': 6.097, 'duration': 3.181}, {'end': 16.902, 'text': "that's wonderful in the world a sunflower, beautiful flower, and how you might encapsulate the idea of a sunflower as data in a JSON file.", 'start': 9.278, 'duration': 7.624}, {'end': 21.085, 'text': 'It was kind of a reasonable demonstration for this first step of working with data.', 'start': 17.022, 'duration': 4.063}, {'end': 24.508, 'text': "But if you look at it, it's really simple.", 'start': 21.386, 'duration': 3.122}, {'end': 25.809, 'text': "It's like a single object.", 'start': 24.548, 'duration': 1.261}, {'end': 27.351, 'text': "It's got four properties in it.", 'start': 26.09, 'duration': 1.261}, {'end': 29.052, 'text': "There's not a lot of complexity.", 'start': 27.571, 'duration': 1.481}, {'end': 32.255, 'text': "You know, flower.name, flower.r, that's all you sort of had to worry about.", 'start': 29.072, 'duration': 3.183}, {'end': 37.237, 'text': "But realistically, you're going to find a data set that's going to have a lot more in it.", 'start': 32.494, 'duration': 4.743}, {'end': 45.5, 'text': 'You might want to have a data set that has you know the high temperature in, you know Tokyo every day for the last year,', 'start': 37.237, 'duration': 8.263}], 'summary': 'Discussion on working with json data, starting with a simple sunflower example and moving on to more complex datasets.', 'duration': 44.626, 'max_score': 0.874, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw874.jpg'}, {'end': 244.152, 'src': 'embed', 'start': 215.623, 'weight': 4, 'content': [{'end': 218.925, 'text': "So if it's an array, I've got to say index 1.", 'start': 215.623, 'duration': 3.302}, {'end': 223.727, 'text': "And so now I'm in this object, and I want to get the height dot height.", 'start': 218.925, 'duration': 4.802}, {'end': 229.907, 'text': 'So you can see I have to figure out the path into this JSON file.', 'start': 225.486, 'duration': 4.421}, {'end': 232.788, 'text': "I need to know the property name that I'm looking for.", 'start': 230.207, 'duration': 2.581}, {'end': 236.889, 'text': "And if that property is an array, I need to know the index that I'm looking for.", 'start': 233.088, 'duration': 3.801}, {'end': 242.011, 'text': "And if that thing in the array is an object, I need to know the property of that object that I'm looking for.", 'start': 237.19, 'duration': 4.821}, {'end': 244.152, 'text': 'So this is just one scenario.', 'start': 242.191, 'duration': 1.961}], 'summary': 'Navigating json file to access specific properties and indices.', 'duration': 28.529, 'max_score': 215.623, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw215623.jpg'}], 'start': 0.874, 'title': 'Handling json data', 'summary': 'Discusses the necessity of handling complex json data, featuring a demonstration of a simple json object and addressing challenges with larger and nested data sets. it also covers accessing and manipulating json data, emphasizing the significance of practice when working with diverse data sources.', 'chapters': [{'end': 62.012, 'start': 0.874, 'title': 'Working with json data', 'summary': 'Discusses the need for handling more complex json data sets, with a demonstration of a simple json object and a mention of the challenges when dealing with larger and nested data sets.', 'duration': 61.138, 'highlights': ['The demonstration of a simple JSON object with four properties: flower.name, flower.r, highlighting the simplicity of the data (Relevance: 5)', 'Mention of the need to handle more complex data sets, such as high temperature data in Tokyo for the last year, indicating the challenges of dealing with larger and nested data sets (Relevance: 4)']}, {'end': 352.777, 'start': 62.012, 'title': 'Working with json data and objects', 'summary': 'Discusses accessing and manipulating json data, demonstrating how to navigate through nested objects and arrays, and emphasizes the importance of practice when working with different data sources.', 'duration': 290.765, 'highlights': ['The importance of practicing JSON data manipulation is emphasized, particularly when working with different data sources. Practicing on your own is necessary when working with different data sources, to navigate through nested objects and arrays effectively.', 'Demonstrates the process of accessing and manipulating JSON data, including navigating through nested objects and arrays. The chapter provides a step-by-step demonstration of accessing and manipulating JSON data, emphasizing the process of navigating through nested objects and arrays.', 'The significance of understanding the path into a JSON file and identifying the property names, indexes, and object properties is highlighted. Understanding the path into a JSON file, identifying property names, indexes, and object properties is crucial for effective manipulation of JSON data.']}], 'duration': 351.903, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw874.jpg', 'highlights': ['The demonstration of a simple JSON object with four properties: flower.name, flower.r, highlighting the simplicity of the data (Relevance: 5)', 'Mention of the need to handle more complex data sets, such as high temperature data in Tokyo for the last year, indicating the challenges of dealing with larger and nested data sets (Relevance: 4)', 'The importance of practicing JSON data manipulation is emphasized, particularly when working with different data sources. Practicing on your own is necessary when working with different data sources, to navigate through nested objects and arrays effectively.', 'Demonstrates the process of accessing and manipulating JSON data, including navigating through nested objects and arrays. The chapter provides a step-by-step demonstration of accessing and manipulating JSON data, emphasizing the process of navigating through nested objects and arrays.', 'The significance of understanding the path into a JSON file and identifying the property names, indexes, and object properties is highlighted. Understanding the path into a JSON file, identifying property names, indexes, and object properties is crucial for effective manipulation of JSON data.']}, {'end': 526.186, 'segs': [{'end': 506.551, 'src': 'embed', 'start': 480.804, 'weight': 0, 'content': [{'end': 488.449, 'text': 'And I want to look at the Crozet or the Crozet or the Crozet shag, which is the third element but index 2 in that array.', 'start': 480.804, 'duration': 7.645}, {'end': 489.91, 'text': 'So now, over here.', 'start': 488.929, 'duration': 0.981}, {'end': 492.545, 'text': 'Index 2.', 'start': 491.465, 'duration': 1.08}, {'end': 501.689, 'text': 'so again, searching through, looking into a JSON file to pull out some aspect of the data is all about knowing The path.', 'start': 492.545, 'duration': 9.144}, {'end': 502.85, 'text': "what's the root element?", 'start': 501.689, 'duration': 1.161}, {'end': 503.81, 'text': 'you can think of the root element?', 'start': 502.85, 'duration': 0.96}, {'end': 506.551, 'text': "What's the object inside of that that you're looking at?", 'start': 503.97, 'duration': 2.581}], 'summary': 'Searching a json file for specific data requires knowing the path and array index, such as the third element being at index 2.', 'duration': 25.747, 'max_score': 480.804, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw480804.jpg'}], 'start': 352.997, 'title': 'Navigating and retrieving data from json', 'summary': 'Discusses navigating through a json file, demonstrating how to access nested properties and elements, and emphasizes the importance of understanding the file structure and path to retrieve specific data.', 'chapters': [{'end': 526.186, 'start': 352.997, 'title': 'Navigating and retrieving data from json', 'summary': 'Discusses navigating through a json file, demonstrating how to access nested properties and elements, and emphasizes the importance of understanding the file structure and path to retrieve specific data.', 'duration': 173.189, 'highlights': ['Understanding JSON file structure and path is crucial for retrieving specific data, as demonstrated by accessing nested properties and elements.', 'Demonstrating the process of navigating through a JSON file, highlighting the importance of knowing the root element, object types, and array indices for data retrieval.', 'Emphasizing the complexity of accessing nested data within a JSON file and the need to understand the structure and path for efficient data retrieval.', 'Illustrating the process of accessing specific elements within nested arrays and objects in a JSON file to retrieve desired data.']}], 'duration': 173.189, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw352997.jpg', 'highlights': ['Understanding JSON file structure and path is crucial for retrieving specific data, as demonstrated by accessing nested properties and elements.', 'Demonstrating the process of navigating through a JSON file, highlighting the importance of knowing the root element, object types, and array indices for data retrieval.', 'Emphasizing the complexity of accessing nested data within a JSON file and the need to understand the structure and path for efficient data retrieval.', 'Illustrating the process of accessing specific elements within nested arrays and objects in a JSON file to retrieve desired data.']}, {'end': 963.417, 'segs': [{'end': 610.432, 'src': 'heatmap', 'start': 539.494, 'weight': 2, 'content': [{'end': 547.336, 'text': "If you haven't watched the videos about how to make DOM elements, how to make paragraphs and links and other things on the page, you can look at that.", 'start': 539.494, 'duration': 7.842}, {'end': 551.477, 'text': "I'm going to say var bird equals birds.", 'start': 547.856, 'duration': 3.621}, {'end': 554.078, 'text': 'Oh, no, data.', 'start': 553.497, 'duration': 0.581}, {'end': 554.378, 'text': 'Oh, sorry.', 'start': 554.138, 'duration': 0.24}, {'end': 555.738, 'text': 'I want to make this call this data.', 'start': 554.398, 'duration': 1.34}, {'end': 557.418, 'text': 'Because the first thing, data.', 'start': 556.258, 'duration': 1.16}, {'end': 559.999, 'text': 'Are you looking at that? Data.', 'start': 558.659, 'duration': 1.34}, {'end': 566.366, 'text': 'What did I say? Index one dot members index two.', 'start': 561.283, 'duration': 5.083}, {'end': 569.228, 'text': 'Index one dot members index two.', 'start': 567.107, 'duration': 2.121}, {'end': 573.88, 'text': 'And now createP that bird.', 'start': 571.497, 'duration': 2.383}, {'end': 577.444, 'text': "And if we run this, we're going to see, look at that.", 'start': 574.861, 'duration': 2.583}, {'end': 578.365, 'text': 'There it is.', 'start': 577.844, 'duration': 0.521}, {'end': 579.966, 'text': "That's the bird I'm seeing on the screen.", 'start': 578.445, 'duration': 1.521}, {'end': 584.431, 'text': "Now again, this is like a trivial sort of like, this is like I'm proving that JSON works.", 'start': 580.127, 'duration': 4.304}, {'end': 585.593, 'text': "There's data in there.", 'start': 584.672, 'duration': 0.921}, {'end': 586.473, 'text': 'It has a structure.', 'start': 585.653, 'duration': 0.82}, {'end': 587.915, 'text': 'That structure can be accessed.', 'start': 586.674, 'duration': 1.241}, {'end': 591.919, 'text': "But most likely what you'd want to be doing is displaying everything in the data set.", 'start': 588.155, 'duration': 3.764}, {'end': 599.985, 'text': 'creating some tool where the user could search into the data set and, ideally, that data set might have thousands of birds in it instead of just 10,', 'start': 592.96, 'duration': 7.025}, {'end': 600.986, 'text': 'or however many are in there.', 'start': 599.985, 'duration': 1.001}, {'end': 603.867, 'text': "So let's go a little bit deeper.", 'start': 601.306, 'duration': 2.561}, {'end': 606.609, 'text': "I'm at 10 minutes and you're sticking with me.", 'start': 603.887, 'duration': 2.722}, {'end': 610.432, 'text': "I'm thankful again, because I feel like I'm talking.", 'start': 606.689, 'duration': 3.743}], 'summary': 'Demonstration of accessing and displaying json data for bird dataset.', 'duration': 30.305, 'max_score': 539.494, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw539494.jpg'}, {'end': 704.474, 'src': 'heatmap', 'start': 682.259, 'weight': 0.706, 'content': [{'end': 690.183, 'text': "And let's just start by saying create element and h1.", 'start': 682.259, 'duration': 7.924}, {'end': 690.844, 'text': "I can't spell.", 'start': 690.263, 'duration': 0.581}, {'end': 695.827, 'text': 'Element h1 what? Birds.', 'start': 691.064, 'duration': 4.763}, {'end': 698.47, 'text': 'index i dot family.', 'start': 696.869, 'duration': 1.601}, {'end': 704.474, 'text': "so I want birds index 0 dot family, then index 1 dot family, and then you know, presumably there's more birds down here.", 'start': 698.47, 'duration': 6.004}], 'summary': 'Using javascript to access bird families by index, beginning at 0.', 'duration': 22.215, 'max_score': 682.259, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw682259.jpg'}, {'end': 867.465, 'src': 'embed', 'start': 843.294, 'weight': 0, 'content': [{'end': 850.878, 'text': "Now, again, I haven't done anything that I would say is interesting with this data, but I'm showing you just how to navigate a JSON file.", 'start': 843.294, 'duration': 7.584}, {'end': 852.918, 'text': 'You might look for a particular piece of data.', 'start': 850.918, 'duration': 2}, {'end': 854.799, 'text': 'You might iterate over all the data.', 'start': 853.159, 'duration': 1.64}, {'end': 858.598, 'text': 'Certainly you could think about How would you draw something based on the data?', 'start': 855.059, 'duration': 3.539}, {'end': 863.061, 'text': 'Like, maybe you would draw circles tied to the number of members of each family of birds.', 'start': 858.858, 'duration': 4.203}, {'end': 864.503, 'text': 'You could animate that.', 'start': 863.582, 'duration': 0.921}, {'end': 867.465, 'text': "Could you have flying birds on the screen, each with their name? I don't know.", 'start': 864.543, 'duration': 2.922}], 'summary': 'Tutorial on navigating json data for drawing and animation.', 'duration': 24.171, 'max_score': 843.294, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw843294.jpg'}, {'end': 925.025, 'src': 'embed', 'start': 900.07, 'weight': 7, 'content': [{'end': 909.094, 'text': "I encourage you to use this corpora repository, which just has a lot of goofy and random sets of data in it, and hopefully that'll get you started.", 'start': 900.07, 'duration': 9.024}, {'end': 915.158, 'text': 'What I want to do in the next video is look at how you might pull this data from a URL.', 'start': 909.114, 'duration': 6.044}, {'end': 925.025, 'text': "So what if you had a www.something.com slash something.json that you could pull rather than just this local file that's typed in your project.", 'start': 915.418, 'duration': 9.607}], 'summary': 'Encouraging the use of corpora repository with goofy and random data to get started. next, exploring data retrieval from a url.', 'duration': 24.955, 'max_score': 900.07, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw900070.jpg'}], 'start': 526.246, 'title': 'Displaying json data', 'summary': 'Demonstrates accessing and displaying json data to create a simple display of a bird from the dataset and covers displaying json data in a web page by accessing and looping through the data to show the family names and members of birds, providing guidance on navigating a json file and encouraging practice with json files.', 'chapters': [{'end': 627.868, 'start': 526.246, 'title': 'Accessing and displaying json data', 'summary': 'Demonstrates accessing and displaying json data to create a simple display of a bird from the dataset, while emphasizing the potential for more complex applications with larger datasets.', 'duration': 101.622, 'highlights': ['The chapter demonstrates accessing and displaying JSON data to create a simple display of a bird from the dataset.', 'It emphasizes the potential for more complex applications with larger datasets.', 'The speaker discusses the structure and accessibility of the data within the JSON file.', 'The demonstration focuses on proving the functionality of JSON and its data structure.', 'The potential for creating tools for users to search through larger datasets is mentioned.']}, {'end': 963.417, 'start': 627.888, 'title': 'Displaying json data in web page', 'summary': 'Covers displaying json data in a web page by accessing and looping through the data to show the family names and members of birds, providing guidance on navigating a json file and encouraging practice with json files.', 'duration': 335.529, 'highlights': ['The chapter covers displaying JSON data in a web page by accessing and looping through the data to show the family names and members of birds. The speaker discusses accessing and looping through the JSON data to display family names and members of birds, demonstrating the process of navigating a JSON file to extract and display relevant data.', 'Providing guidance on navigating a JSON file and encouraging practice with JSON files. The speaker encourages practicing with JSON files, offering guidance on creating and accessing JSON data, and suggests using the corpora repository for practice.', 'Encouraging practice with JSON files and suggests using the corpora repository for practice. The speaker encourages the audience to practice with JSON files and recommends using the corpora repository to gain familiarity and skills in handling JSON data.']}], 'duration': 437.171, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/118sDpLOClw/pics/118sDpLOClw526246.jpg', 'highlights': ['The chapter demonstrates accessing and displaying JSON data to create a simple display of a bird from the dataset.', 'The chapter covers displaying JSON data in a web page by accessing and looping through the data to show the family names and members of birds.', 'The speaker discusses the structure and accessibility of the data within the JSON file.', 'The demonstration focuses on proving the functionality of JSON and its data structure.', 'The potential for creating tools for users to search through larger datasets is mentioned.', 'The speaker discusses accessing and looping through the JSON data to display family names and members of birds, demonstrating the process of navigating a JSON file to extract and display relevant data.', 'Providing guidance on navigating a JSON file and encouraging practice with JSON files.', 'Encouraging practice with JSON files and suggests using the corpora repository for practice.']}], 'highlights': ['The importance of practicing JSON data manipulation is emphasized, particularly when working with different data sources. Practicing on your own is necessary when working with different data sources, to navigate through nested objects and arrays effectively.', 'Understanding the path into a JSON file, identifying property names, indexes, and object properties is crucial for effective manipulation of JSON data.', 'Understanding JSON file structure and path is crucial for retrieving specific data, as demonstrated by accessing nested properties and elements.', 'The chapter covers displaying JSON data in a web page by accessing and looping through the data to show the family names and members of birds.', 'The demonstration focuses on proving the functionality of JSON and its data structure.', 'The potential for creating tools for users to search through larger datasets is mentioned.', 'The speaker discusses accessing and looping through the JSON data to display family names and members of birds, demonstrating the process of navigating a JSON file to extract and display relevant data.', 'Providing guidance on navigating a JSON file and encouraging practice with JSON files.']}