I am in the process of developing a tool that can extract the Core Web Vitals metrics from a specified URL.
By utilizing the API, I am able to retrieve a JSON object which can be accessed with JSONPath.
I intend to utilize a forEach loop to populate the data into the HTML fields.
My current inquiry is regarding the method to access child nodes within a JSON structure without explicitly using their names.
document.querySelectorAll('[data-section^="cww"]').forEach((nodes, index) => {
console.log(values.body.record.metrics);
});
{
"key": {
"origin": "https://developer.mozilla.org"
},
"metrics": {
"cumulative_layout_shift": {
// Histogram and percentiles data...
},
"first_contentful_paint": {
// Histogram and percentiles data...
},
"first_input_delay": {
// Histogram and percentiles data...
},
"largest_contentful_paint": {
// Histogram and percentiles data...
}
}
}