Javascrpt ; reshape a dataset (read in as a 2D array) to be indexed by rows instead of columns

Question

I'm trying to format my dataset so it can be used by danfjo.js which is formatted as the following

json_data = [{ A: 0.4612, B: 4.28283, C: -1.509, D: -1.1352 },
            { A: 0.5112, B: -0.22863, C: -3.39059, D: 1.1632 },
            { A: 0.6911, B: -0.82863, C: -1.5059, D: 2.1352 },
            { A: 0.4692, B: -1.28863, C: 4.5059, D: 4.1632 }]

df = new dfd.DataFrame(json_data)
df.print()

My POST request sends back a dataframe in the following form.

data
    'A' : {0:'0.4612', 1:'0.5112',...
    'B' : {0:'4.28283', 1:'-0.22863', ...

I'm unfamilar with the javascript language. What term would you use for this reshape and how would you go about it?

Answer 1

The API POST data provided in the question is invalid as well as incomplete. It could be either an object or an array of objects or something else. In either of the two cases (first being formB, and second being formC in the snippet below), the code will generate an array (which matches the array being assigned to the variable json_data in the question abouve) when user presses "y" at the prompt.

const myTransform = (obj, retArr = false) => {
  const res = structuredClone(
    Array.isArray(obj)
      ? {...obj}
      : obj
  );
  const colKeys = [...new Set(
    Object.values(res)
    .flatMap(ob => (
      Object.keys(ob)
    ))
  )];
  const rowKeys = [...new Set(Object.keys(res))];
  const result = (
    Object.fromEntries(colKeys.map(c => ([
      [c], Object.fromEntries(rowKeys.map(r => ([
          [r], res[r][c]
        ])))
    ])))
  );
  return (
    retArr
    ? Object.values(result)
    : result
  );
};

const formA = [{
    A: 0.4612,
    B: 4.28283,
    C: -1.509,
    D: -1.1352
  },
  {
    A: 0.5112,
    B: -0.22863,
    C: -3.39059,
    D: 1.1632
  },
  {
    A: 0.6911,
    B: -0.82863,
    C: -1.5059,
    D: 2.1352
  },
  {
    A: 0.4692,
    B: -1.28863,
    C: 4.5059,
    D: 4.1632
  }
];

const formB = {
  "A": {
    "0": 0.4612,
    "1": 0.5112,
    "2": 0.6911,
    "3": 0.4692
  },
  "B": {
    "0": 4.28283,
    "1": -0.22863,
    "2": -0.82863,
    "3": -1.28863
  },
  "C": {
    "0": -1.509,
    "1": -3.39059,
    "2": -1.5059,
    "3": 4.5059
  },
  "D": {
    "0": -1.1352,
    "1": 1.1632,
    "2": 2.1352,
    "3": 4.1632
  }
};

const formC = [{
  "A": {
    "0": 0.4612,
    "1": 0.5112,
    "2": 0.6911,
    "3": 0.4692
  }},{
  "B": {
    "0": 4.28283,
    "1": -0.22863,
    "2": -0.82863,
    "3": -1.28863
  }},{
  "C": {
    "0": -1.509,
    "1": -3.39059,
    "2": -1.5059,
    "3": 4.5059
  }},{
  "D": {
    "0": -1.1352,
    "1": 1.1632,
    "2": 2.1352,
    "3": 4.1632
  }
}];

console.log(
  myTransform(
    formB,
    prompt('Press "y" for array')
    .toString()
    .toLowerCase()
    === 'y'
  )
);

.as-console-wrapper { max-height: 100% !important; top: 0 }