How would I scrape the JS-generated data on this webpage?

Question

This past week, there was the launch of a new tool called #Homescreen that allows people to share a screenshot of the apps that they have on their iPhone home screen. For example: https://homescreen.is/iamfinnym

I'd like to build a scraper that extracts the names of all the apps given a user's page (in addition to their location on the screen). How would I do this? I know how to build a normal HTML scraper, but it looks like the apps are generated onto the page via some kind of React.js javascript call, and I'm not sure how to go about figuring this out. (I can write basic Javascript, but have never used React.js before and I don't know how to get started.)

Answer 1

This is how you can get the data through Chrome's dev console:

If you open the Chrome dev console (Ctrl / Cmd+Shift+C), and head to the Network, you will find this:

If you click on it, you will see that the API is set up so that when you make a GET request to https://homescreen.is/api/user/{USERNAME}, you will get the data of their apps as responseData.apps. Click on Preview to get a preview of the data sent by the API:

Now you can use any language's http library to make GET requests to the API.