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.

Answer 1

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);