object to array

object-to-array.js

import React from "react";
// import { Radio, Button } from 'antd';
import VisualChart from './visual-chart';

// Hooks
import { useQueryCharts } from './hooks/useQueryCharts';

//CSS
import './charts.scss';

const Charts = () => {

  const { loadingQuery, errorQuery, dataQuery } = useQueryCharts();

  const filterArray = (arr) => {
    var index = -1,
      arr_length = arr ? arr.length : 0,
      resIndex = -1,
      result = [];

    while (++index < arr_length)
    {
      const value = arr[ index ];

      if (value)
      {
        result[ ++resIndex ] = value;
      }
    }

    return result;
  }

  const loaderQueryJSX = loadingQuery && (
    <p>Loading...</p>
  );

  const errorQueryJSX = errorQuery && (
    <p>
      We have a problem: { errorQuery.message }
    </p>
  );

  const ListCountItems = dataQuery && (
    () => {

      let arr = Array.from(Object.entries(dataQuery)); // делаю из объекта массив и перебираю массив функцией map()
      // console.log(arr)
      return (

        //многомерный массив
        arr.map(
          (item) => {
            const key = item[ 0 ];
            const countArr = filterArray(item[ 1 ]);

            console.log(countArr)

            return (
              countArr.map(
                ({ date, per_day, total }) => <li key={ key }>{ key }: { total }</li>
              )
            )
          }
        )
      )
    }
  );

  const dataQueryJSX = dataQuery && (
    <ul>
      <ListCountItems />
    </ul>
  );

  return (
    <>
      { dataQueryJSX }
      { loaderQueryJSX }
      { errorQueryJSX }
    </>
  )
};

export default Charts;






//перебираю for

import React from "react";
// import { Radio, Button } from 'antd';
import VisualChart from './visual-chart';

// Hooks
import { useQueryCharts } from './hooks/useQueryCharts';

//CSS
import './charts.scss';

const Charts = () => {

  const { loadingQuery, errorQuery, dataQuery } = useQueryCharts();

  const filterArray = (arr) => {
    var index = -1,
      arr_length = arr ? arr.length : 0,
      resIndex = -1,
      result = [];

    while (++index < arr_length)
    {
      const value = arr[ index ];

      if (value)
      {
        result[ ++resIndex ] = value;
      }
    }

    return result;
  }

  const loaderQueryJSX = loadingQuery && (
    <p>Loading...</p>
  );

  const errorQueryJSX = errorQuery && (
    <p>
      We have a problem: { errorQuery.message }
    </p>
  );

  const ListCountItems = dataQuery && (
    () => {



      for (let [ key, countArr ] of Object.entries(dataQuery)) // получаю объект и перебираю функцией for
      {
        const filteredCountArr = filterArray(countArr);
        console.log(dataQuery)

        return filteredCountArr.map( //выйдет из цикла после первой итерации из за return
          ({ date, per_day, total }) => <li>{ `${ key }` }_total: { total }</li>
        )
      }


      return null;
    }
  );

  const dataQueryJSX = dataQuery && (
    <ul>
      <ListCountItems />
    </ul>
  );

  return (
    <>
      { dataQueryJSX }
      { loaderQueryJSX }
      { errorQueryJSX }
    </>
  )
};

export default Charts;