Comparing nested object arrays and returning values that exist JavaScript, React

Hi I’m trying to get my numbers fetched from the backend server to a chart library but it seems almost impossible. Below are my codes please help me out.

const data = [
    { id: "americano",
       data: [{x: "10",y: 10,}, {x: "11",y: 20,}, {x: "12",y: 40,}, {x: "13",y: 50,}, {x: 14,y:60,}],},
    { id: "latte",
       data: [{x: "10",y: 10,}, {x: "11",y: 20,}, {x: "12",y: 40,}, {x: "13",y: 50,}, {x: 14,y:60,}],},
    { id: "espresso",
       data: [{x: "10",y: 10,}, {x: "11",y: 20,}, {x: "12",y: 40,}, {x: "13",y: 50,}, {x: 14,y:60,}],},
]

the data I need for library chart for any x value missing, the chart collapses so I need all values however the problem is the data from our backend server, there aren’t all data needed.

const serverdata = [
    { "id": "latte",
        "data": [{"x": "12", "y": 30}]},
    {"id": "americano",
        "data": [{"x": "10","y": 20},{ "x": "13","y": 10}]},
    {"id": "espresso",
        "data": [{"x": "10","y": 30},{ "x": "11","y": 10},{ "x": "12","y": 20}]},
  ]

data i get from the backend server

here’s what i tried

i tried putting the following value instead of the y value in the data

const returnExistingValues = (a) => {
    for (let i = 0; i < data.length; i++) {
        for (let j = 0; j < a.length; j++) {
           for (let k = 0; k < data[i].data.length; k++) {
              for (let l = 0; l < a[j].data.length; l++) {
            if (
              ((data[i].menuName === a[j].menuName)) &&
              ((data[i].data[k].x === a[j].data[l].x))
            ) {
                return a[j].data[l].y;
            } else {
              return 0;
            }
          }
        }
      }
    }
  };

for example

const data = [
    { id: "americano",
       data: [{x: "10",y: returnExistingValues(serverdata),}
    ]
  }
]

all the returnExistingValues function is doing is returning 0 for the values 🙁 anyone please help me out?

below is the expected result

const newData = [
    { id: "americano",
      data: [{x: "10",y: 20,}, {x: "11",y: 0,}, {x: "12",y: 0,}, {x: "13",y: 10,}, {x: 14,y:0,}],},
    { id: "latte",
       data: [{x: "10",y: 0,}, {x: "11",y: 0,}, {x: "12",y: 30,}, {x: "13",y: 0,}, {x: 14,y:0,}],},
    { id: "espresso",
       data: [{x: "10",y: 0,}, {x: "11",y: 30,}, {x: "12",y: 10,}, {x: "13",y: 20,}, {x: 14,y:0,}],},
]

Answer

Nothing is impossible! Here is my solution:

const serverdata = [
    { "id": "latte",
        "data": [{"x": "12", "y": 30}]},
    {"id": "americano",
        "data": [{"x": "10","y": 20},{ "x": "13","y": 10}]},
    {"id": "espresso",
        "data": [{"x": "10","y": 30},{ "x": "11","y": 10},{ "x": "12","y": 20}]},
  ]


function fillEmptyData(serverdata){

  //Calculate min and max x value from all values
  let max = 0;
  let min = Number.MAX_SAFE_INTEGER;
  Object.entries(serverdata).forEach(([key, value]) => {
      for (const item of value.data) { 
        max = item.x > max ? item.x : max;
        min = item.x < min ? item.x : min;
      }
  });

  //Now insert all the values in the new array
  let newarr = serverdata;
  Object.entries(serverdata).forEach(([key, value]) => {
    for(let i = min; i < max; i++){
      //Insert missing values
      newarr[key].data[i-min] = newarr[key].data[i] ?? {x:i, y:0};
    }
  });

  return newarr;
}

console.log(fillEmptyData(serverdata))