How to map array of objects which i need to groupby date property in JSON format with react JS


Below is the data i have been working on with. How do i access the "display" array of objects with its timestamp and date as properties in react JS?

{"display":
{"2019-12-05 07:15:00":{"1. open":"1.1083","2. high":"1.1084","3. low":"1.1081","4. close":"1.1083"},
"2019-12-05 07:10:00":{"1. open":"1.1084","2. high":"1.1084","3. low":"1.1079","4. close":"1.1083"},
"2019-12-05 07:05:00":{"1. open":"1.1082","2. high":"1.1084","3. low":"1.1080","4. close":"1.1084"},
"2019-12-05 07:00:00":{"1. open":"1.1082","2. high":"1.1083","3. low":"1.1079","4. close":"1.1082"},
"2019-12-05 06:55:00":{"1. open":"1.1083","2. high":"1.1084","3. low":"1.1080","4. close":"1.1082"},
"2019-12-05 06:50:00":{"1. open":"1.1081","2. high":"1.1083","3. low":"1.1080","4. close":"1.1083"},
"2019-12-05 06:45:00":{"1. open":"1.1081","2. high":"1.1082","3. low":"1.1079","4. close":"1.1081"},
"2019-12-05 06:40:00":{"1. open":"1.1081","2. high":"1.1082","3. low":"1.1079","4. close":"1.1081"},
"2019-12-05 06:35:00":{"1. open":"1.1082","2. high":"1.1082","3. low":"1.1080","4. close":"1.1081"},
"2019-12-05 06:30:00":{"1. open":"1.1081","2. high":"1.1083","3. low":"1.1080","4. close":"1.1081"}
}}

I have a project to perform a calculation on the Open,high,low,close property values. Tried to map the data with map function but it didnt work.

Please give me some idea to proceed with react JS

You can convert your object to required one.

let temp = {
  "display": {
    "2019-12-05 07:15:00": {
      "1. open": "1.1083",
      "2. high": "1.1084",
      "3. low": "1.1081",
      "4. close": "1.1083"
    },
    "2019-12-05 07:10:00": {
      "1. open": "1.1084",
      "2. high": "1.1084",
      "3. low": "1.1079",
      "4. close": "1.1083"
    },
    "2019-12-05 07:05:00": {
      "1. open": "1.1082",
      "2. high": "1.1084",
      "3. low": "1.1080",
      "4. close": "1.1084"
    },
    "2019-12-05 07:00:00": {
      "1. open": "1.1082",
      "2. high": "1.1083",
      "3. low": "1.1079",
      "4. close": "1.1082"
    },
    "2019-12-05 06:55:00": {
      "1. open": "1.1083",
      "2. high": "1.1084",
      "3. low": "1.1080",
      "4. close": "1.1082"
    },
    "2019-12-05 06:50:00": {
      "1. open": "1.1081",
      "2. high": "1.1083",
      "3. low": "1.1080",
      "4. close": "1.1083"
    },
    "2019-12-05 06:45:00": {
      "1. open": "1.1081",
      "2. high": "1.1082",
      "3. low": "1.1079",
      "4. close": "1.1081"
    },
    "2019-12-05 06:40:00": {
      "1. open": "1.1081",
      "2. high": "1.1082",
      "3. low": "1.1079",
      "4. close": "1.1081"
    },
    "2019-12-05 06:35:00": {
      "1. open": "1.1082",
      "2. high": "1.1082",
      "3. low": "1.1080",
      "4. close": "1.1081"
    },
    "2019-12-05 06:30:00": {
      "1. open": "1.1081",
      "2. high": "1.1083",
      "3. low": "1.1080",
      "4. close": "1.1081"
    }
  }
};

let display = temp.display;

let ans = [];

Object.keys(display).forEach((key) => {

  ans.push({
    "date": key.split(" ")[0],
    "timestamp": key.split(" ")[1],
  });

});

console.log(ans);