CODEWITHSUNDEEP
javascript
Gathris
Gathris

Reputation: 255

Graphing data in a browser

A bit of background. I have a Spring project setup to do some web scraping and I want to graph some of the data that comes out. The service is setup and returns a model and view for the web page that I am building.

I am open to different ways of solving this but here is my first approach.

I am putting all the data into the the returned web page using Spring and I thought about filtering it into different views (rather than providing the data multiple times).

The issue I am having is that spring is returning a list of JSON objects that represent the entities.

const allData = [{ "name": "oxygen", "orderId": "1", "price": 1.1, "available": 1, "remaining": 1, "room": "E1W1", "date": "2021-06-10T00:00:00.000+01:00", "orderType": "BUY", "shard": "SHARD_0" },
{ "name": "silicon", "orderId": "2", "price": 2.2, "available": 2, "remaining": 2, "room": "N1E2", "date": "2021-06-10T00:00:00.000+01:00", "orderType": "SELL", "shard": "SHARD_2" }];

The charting I have decided to try using is https://developers.google.com/chart/interactive/docs/basic_load_libs which is looking for the data to be of the form

const toBe = [
    ['Date', 'Price'],
    ['2004', 1000],
    ['2005', 1170],
    ['2006', 660],
    ['2007', 1030]
];

My first approach to this is to use these 2 functions to do the conversion but it crashes my browser (runs out of memory so well done me).

// Json object to array
function objectToArray(obj) {
    const keys = Object.keys(obj);
    const res = keys;
    for (let i = 0; i < keys.length; i++) {
        res.push(obj[keys[i]]);
    };
    return res;
};

// Converts List of Json to array of arrays.
function listToGraphData(obj) {
    let res;
    res.push(Object.keys(obj[0]));
    for (let i = 0; i < obj.length; i++) {
        res.push(objectToArray(obj[i]));
    }
    return res;
}

How do I either fix my javascript or find a better solution?

Upvotes: 1

Views: 115

Answers (2)

Gathris
Gathris

Reputation: 255

Thanks to @Sega for the help. I finally worked it out as

function objectToArray( obj)  {
    // const keys = Object.keys(obj);
    const res = Object.values(obj);

    return res;
};

function listToGraphData(obj){
    let res=[Object.keys(obj[0])]; // Needed to make keys an array.
    for(let i=0; i<obj.length; i++){
        res.push(objectToArray(obj[i]));
    }
    return res;
}

Upvotes: 0

snd
snd

Reputation: 123

The function objectToArray never end, the browser will crash :

function objectToArray(obj) {
    const keys = Object.keys(obj);
    const res = keys;
    for (let i = 0; i < keys.length; i++) {
        res.push(obj[keys[i]]);
    };
    return res;
};

Try this :

function objectToArray(obj) {  
    const res = Object.keys(obj).map((key) => {
      return obj[key];
    });
   
    return res;
};

Or simply :

function objectToArray(obj) {  
    const res = Object.values(obj);
   
    return res;
};

And the function listToGraphData should not work because these two lines not working :

let res;
res.push(Object.keys(obj[0])); // Undefined can't push

res is undefined that can't have push methode.

Upvotes: 1

Related Questions