Do you want to query JSON document, extract data, select sub sections or testing a query quickly? This articles explains to do it using Chrome Developer tools. I am using Google Chrome Version 60.0.3112.113. But it should work for all recent versions.
Read Also: Copy DropDownList Data from a Website: Chrome Developer Tools
Video:
Here is demo video to show how to inspect JSON and extract data:
Steps:
1. Store As Global variable
It is easy to capture json web response in Network tab. Right click on the JSON object and select the 'Store as Global Variable' option which is going to create a variable tempX where X is going to be an integer (temp1, temp2 so on and so forth).
2. Ctrl + Alt + click on arrow to auto expand object
To expand node and all its children, press Ctrl + Alt + click. Basically, we are going to search in JSON but it is available in visible content that's why we are expanding all nodes.
3. Search in JSON object
Ctrl + F to open search box, enter term to search in JSON. It is easy to get properties, we want to pick.
4. Copy property path
May be searched data at Nth level of hierarchy, so right click on property and click "Copy Property Path".
For verification, open console, type the temp variable and paste the property path, you must get the expected result.
Suppose the Global variable is "temp1" and copied property path is "[0].name" then the below expression should return the expected result
temp1[0].name 5. Code to extract data in console
Chrome developer tools supports ES6 arrow functions so we are going to use it with array map function
To get list of all names
temp1.map(function(i) {return i.name; })or
temp1.map((i) => { return i.name})or
temp1.map(i => i.name)all will return the same result.
Let's pick name and screen_name properties in tabular format:
console.table(temp1.map((j) => { return { name : j.name, screenName : j.screen_name}}))
Conclusion:
In this article, we saw how easy is to query JSON object and extract data in Chrome Developer Tools. Also, explored "Store as Global Variable" and "Copy property path" features. Hope, it saves your bunch of time.
