React Splitting strings in an array

Question

I was wondering how I would be able to split my array from the dates and the number and then have them as a new array so I can insert it into my Line graph. My code box shows the console.logs with the data and attempts I have made within comments.

The format of the data is this https://corona.lmao.ninja/v2/historical/USA?lastdays=30%27

I am trying to split the json data of cases and deaths from this ":"

I would like the desired output to be an array of cases [33334,32323,12323] dates[4/14/20,4/15/20,4/16/20]

https://codesandbox.io/s/confident-keldysh-uw2uk?file=/src/component/Chart.js

Welcome to stack overflow! You'll get more help if you post the specific bits you are having a problem with as code in your question. It sounds like you want to process an array of data. Post the format of the data as JSON, the code you are processing that data with, and the expected/actual result. — Alex Wayne, May 05 '20 at 22:15
Your data is an object with dates as keys and some numerical value. What is your desired output format? Do you want this object converted to an array? — Drew Reese, May 05 '20 at 22:49
Does this answer your question? [How to convert an Object {} to an Array \[\] of key-value pairs in JavaScript](https://stackoverflow.com/questions/38824349/how-to-convert-an-object-to-an-array-of-key-value-pairs-in-javascript) — Drew Reese, May 05 '20 at 22:53

score 1 · Answer 1 · answered May 07 '20 at 07:22

Object.entries

The Object.entries() method returns an array of a given object's own enumerable string-keyed property [key, value] pairs

We can use this to get an array of [date, cases] pairs from the cases data.

array::reduce

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value

We can "reduce" this array into a single object containing date and cases arrays

const { dates, cases } = Object.entries(caseData).reduce(
  ({ dates, cases }, [date, dateCases]) => ({
    dates: [...dates, date],
    cases: [...cases, dateCases]
  }),
  {
    dates: [],
    cases: []
  }
);

const caseData = {
  "4/7/20": 397121,
  "4/8/20": 428654,
  "4/9/20": 462780,
  "4/10/20": 496535,
  "4/11/20": 526396,
  "4/12/20": 555313,
  "4/13/20": 580619,
  "4/14/20": 607670,
  "4/15/20": 636350,
  "4/16/20": 667592,
  "4/17/20": 699706,
  "4/18/20": 732197,
  "4/19/20": 758809,
  "4/20/20": 784326,
  "4/21/20": 811865,
  "4/22/20": 840351,
  "4/23/20": 869170,
  "4/24/20": 905358,
  "4/25/20": 938154,
  "4/26/20": 965785,
  "4/27/20": 988197,
  "4/28/20": 1012582,
  "4/29/20": 1039909,
  "4/30/20": 1069424,
  "5/1/20": 1103461,
  "5/2/20": 1132539,
  "5/3/20": 1158040,
  "5/4/20": 1180375,
  "5/5/20": 1204351,
  "5/6/20": 1228603
};

const { dates, cases } = Object.entries(caseData).reduce(
  ({ dates, cases }, [date, dateCases]) => ({
    dates: [...dates, date],
    cases: [...cases, dateCases]
  }),
  {
    dates: [],
    cases: []
  }
);

console.log('dates', dates);
console.log('cases', cases);

Now that you've implemented it yourself, the easier/quicker way is to just get the keys and values arrays

Object.keys - Object.values

const caseData = {
  "4/7/20": 397121,
  "4/8/20": 428654,
  "4/9/20": 462780,
  "4/10/20": 496535,
  "4/11/20": 526396,
  "4/12/20": 555313,
  "4/13/20": 580619,
  "4/14/20": 607670,
  "4/15/20": 636350,
  "4/16/20": 667592,
  "4/17/20": 699706,
  "4/18/20": 732197,
  "4/19/20": 758809,
  "4/20/20": 784326,
  "4/21/20": 811865,
  "4/22/20": 840351,
  "4/23/20": 869170,
  "4/24/20": 905358,
  "4/25/20": 938154,
  "4/26/20": 965785,
  "4/27/20": 988197,
  "4/28/20": 1012582,
  "4/29/20": 1039909,
  "4/30/20": 1069424,
  "5/1/20": 1103461,
  "5/2/20": 1132539,
  "5/3/20": 1158040,
  "5/4/20": 1180375,
  "5/5/20": 1204351,
  "5/6/20": 1228603
};

console.log('dates', Object.keys(caseData));
console.log('cases', Object.values(caseData));

React Splitting strings in an array

1 Answers1