convert objects array to griddle readable array

Question

I'm fetching json data with ajax. Then I want to output it in Griddle using griddle-react. The problem is I cannot convert my array to a Griddle readable array.

After the ajax fetch i made a callback function:

function convert(obj) {
      console.log(obj);
      Object.keys(obj).forEach(function (key) {
        let format = JSON.stringify(obj[key]);
        console.log(format);
        self.setState(() => ({ data: key[format] }));
      });
    }

The first console.log output looks like this:

{
    {
      "BTC": {
        "opening_price": "9845000",
        "closing_price": "9967000",
        "min_price": "9814000",
        "max_price": "10047000",
        "average_price": "9928071.5654",
        "units_traded": "7242.04659594",
        "volume_1day": "7242.04659594",
        "volume_7day": "73491.92898643",
        "buy_price": "9967000",
        "sell_price": "9968000"
      },
    }
}

My functions makes it look like this: (second console.log):

{
    "opening_price": "9846000",
    "closing_price": "9965000",
    "min_price": "9814000",
    "max_price": "10047000",
    "average_price": "9929422.0905",
    "units_traded": "7200.46713802",
    "volume_1day": "7200.467F13802",
    "volume_7day": "73395.33311647",
    "buy_price": "9959000",
    "sell_price": "9964000"
  }

I want it to convert to the following array, basically adding the name item, and thereafter Griddle can read it:

{
  "name": "BTC",
  "opening_price": "9845000",
  "closing_price": "9967000",
  "min_price": "9814000",
  "max_price": "10047000",
  "average_price": "9928071.5654",
  "units_traded": "7242.04659594",
  "volume_1day": "7242.04659594",
  "volume_7day": "73491.92898643",
  "buy_price": "9967000",
  "sell_price": "9968000"
},

What I'm doing wrong here? I'm sure its pretty close to what I want, but I can't figure it out at this point.

Eddie · Accepted Answer · 2018-05-02T15:37:33.237

0

You can use Object.entries to get the keys and values. Use Object.assign to make new objects

var obj = {
  "BTC": {"opening_price": "9845000","closing_price": "9967000","min_price": "9814000","max_price": "10047000","average_price": "9928071.5654","units_traded": "7242.04659594","volume_1day": "7242.04659594","volume_7day": "73491.92898643","buy_price": "9967000","sell_price": "9968000"}
}

var newObj = Object.entries(obj).reduce((c, [i, v]) => Object.assign(c, {name: i}, v), {});

console.log(newObj);

If you have several keys, you can use map

var obj = {
  "BTC": {"opening_price": "9845000","closing_price": "9967000","min_price": "9814000","max_price": "10047000","average_price": "9928071.5654","units_traded": "7242.04659594","volume_1day": "7242.04659594","volume_7day": "73491.92898643","buy_price": "9967000","sell_price": "9968000"},
  "OTH": {"opening_price": "9845000","closing_price": "9967000","min_price": "9814000","max_price": "10047000","average_price": "9928071.5654","units_traded": "7242.04659594","volume_1day": "7242.04659594","volume_7day": "73491.92898643","buy_price": "9967000","sell_price": "9968000"},
}

var newArr = Object.entries(obj).map(([i, v]) => Object.assign({}, {name: i}, v));

console.log(newArr);

Without including date property

var obj = {
  "KNC": {"opening_price": "2731","closing_price": "2788","min_price": "2693","max_price": "2849","average_price": "2790.5368","units_traded": "3178032.25814499211673","volume_1day": "3178032.25814499211673","volume_7day": "110687333.315264505902311000","buy_price": "2783","sell_price": "2788"},
  "date": "1525269153470"
}

var newObj = Object.entries(obj).reduce((c, [i, v]) => i !== 'date' ? Object.assign(c, {name: i}, v) : c, {});

console.log(newObj);

edited May 02 '18 at 15:37

answered May 02 '18 at 14:48

Eddie

26,593
6
36
58

Happy to help :) – Eddie May 02 '18 at 15:21
Can I also ignore a key in the array? which is "date", so output everything like BTC,OTH,date, except for date. – pazta May 02 '18 at 15:23
Yes, you can. Which one work for you? The first or the second? I can modify to not include a date property – Eddie May 02 '18 at 15:25
Actually I dont :) It is better for you to give a sample object or array so that I know what you are working with. @pazta – Eddie May 02 '18 at 15:28
{ "KNC": { "opening_price": "2731", "closing_price": "2788", "min_price": "2693", "max_price": "2849", "average_price": "2790.5368", "units_traded": "3178032.25814499211673", "volume_1day": "3178032.25814499211673", "volume_7day": "110687333.315264505902311000", "buy_price": "2783", "sell_price": "2788" }, "date": "1525269153470" } at the end of the whole array there is a date key, how can i ignore that? – pazta May 02 '18 at 15:32
thanks, I modified your code with the second solution (several keys using the map() function), in someway it gave me an error with the c variable. – pazta May 02 '18 at 15:45
The second solution will actually return an array. Happy it works for you :) – Eddie May 02 '18 at 15:50

score 0 · Answer 2 · answered May 02 '18 at 14:49

Can you update your function to have this line in it?

obj[key]["name"] = key

function convert(obj) {
      console.log(obj);
      Object.keys(obj).forEach(function (key) {
        obj[key]["name"] = key;
        let format = JSON.stringify(obj[key]);
        console.log(format);
        //self.setState(() => ({ bithumbData: key[format] }));
      });
    }

iXs · Answer 3 · 2018-05-02T20:08:00.727

0

function convert(obj){
    var parentKey = Object.keys(obj)[0];//Getting parent first element key
    obj = obj[parentKey];
    var newObj = {}; //Creating new empty jason object 
    newObj['name'] = parentKey; //key apply as name element to new jason object 
    for(var key in obj) //looping each child element
        newObj[key] = obj[key]; //child applying to new jason object
    return newObj;
}
console.log(JSON.stringify(convert(obj)));

edited May 02 '18 at 20:08

answered May 02 '18 at 17:26

iXs

726
5
4

While this snippet may answer the question, it is better to include some context about how it answers the question to provide a better answer. – JKirchartz May 02 '18 at 18:42

convert objects array to griddle readable array

3 Answers3