What is the best way to transform a JSON object from a remote source into an Array using JavaScript?

Question

What is the best way to transform a JSON object from a remote source into an Array using JavaScript?

Attempting to transform the JSON object retrieved from my Icecast server into an array for easy access to current listener statistics to display in HTML.

Below is the JavaScript code being used:

const endpoint = 'http://stream.8k.nz:8000/status-json.xsl';    
const serverStats = [];

fetch(endpoint)
    .then(blob => blob.json())
    .then(data => serverStats.push(data));

The above code snippet inserts the object as a singular item in the array. Utilizing the spread method in ES6 does not remedy this issue, as it solely functions on arrays.

javascript arrays json icecast

Answer 1

Answer №1

There is no need for an array in this scenario. As you are only dealing with a single object, the properties you require can be easily accessed from that object.

const endpoint = 'http://stream.8k.nz:8000/status-json.xsl';    
const serverStats = [];

fetch(endpoint)
    .then(blob => blob.json())
    .then(data =>{
        let source = data.icestats.source;
       // console.log(source)
        console.log('Listeners =', source.listeners, ' Peak=', source.listener_peak)


       console.log('\n ******************* \n')
       // to iterate over all the source key/values
       Object.keys(source).forEach(k=> console.log(k,'=', source[k]))
    
    })

.as-console-wrapper {max-height: 100%!important;}

Answer 2

There is no need for an array in this scenario. As you are only dealing with a single object, the properties you require can be easily accessed from that object.

const endpoint = 'http://stream.8k.nz:8000/status-json.xsl';    
const serverStats = [];

fetch(endpoint)
    .then(blob => blob.json())
    .then(data =>{
        let source = data.icestats.source;
       // console.log(source)
        console.log('Listeners =', source.listeners, ' Peak=', source.listener_peak)


       console.log('\n ******************* \n')
       // to iterate over all the source key/values
       Object.keys(source).forEach(k=> console.log(k,'=', source[k]))
    
    })

.as-console-wrapper {max-height: 100%!important;}

What is the best way to transform a JSON object from a remote source into an Array using JavaScript?

Answer №1

Similar questions

TinyMCE toolbar missing the "hr" option

The choices in the second dropdown menu will change based on the selection made in the first dropdown menu

Calculate the outer product of arrays with varying dimensions

Having trouble retrieving the attribute of an appended element in jQuery?

The endless $digest loop issue arises when attempting to filter an array of objects

RegEx - Finding exact matches without any additional characters trailing

Leveraging Circe for JSON string decoding

Using AJAX to submit a form and retrieve response data in Javascript

Error: The hook call is invalid and can only be made within the body of a function component in ReactJS

Generate a fresh object if the values within the TypeScript object are identical

Tips for displaying the HTML content within the autocomplete box

Exploring multidimensional arrays in PHP

After the ajax call has finished loading the page, I would like to toggle a particular div

Guide to utilizing a JWT token within an httpOnly cookie for accessing a secured API endpoint

Implementing a FadeOut effect for the clicked link

Error in Adding Items to React To-Do List

Angular and Spring are producing a 415 Unsupported Media Type error

The build process encountered an error due to the absence of ESLint configuration after the import

Tips for guaranteeing blocking within a loop in Node.JS

Tailored NodeJS compilation incorporating JavaScript modules