I can't output data from json

Question

I am developing a website on the stack: React, redux, typescript. I can't output a nested array with data from a data object in JSON My code:

app.tsx

const App: React.FC = () => {
    const {tasks, loading, error} = useTypedSelector(state => state.task)
    const dispatch: Dispatch<any> = useDispatch()


    useEffect(() => {
        dispatch(fetchTasks())
    }, [])

    if (loading) {
        return <h1>Идет загрузка...</h1>
    }
    if (error) {
        return <h1>{error}</h1>
    }

    return (
        <div className="Gant_Container">
            <div>
                <p className="Project_Period">{Object.values(tasks)[0]} / {Object.values(tasks)[1]}</p>
            </div>
            <div>
                {Object.values(tasks).map((task, id) => {
                    return (<div key={id}>
                        {task.id}
                        {task.title}
                        {chart.start}
                        {chart.end}
                    </div>)
                })}
            </div>
        </div>
    );
};

export default Gantt_Container;

store/index.ts

export const store = createStore(rootReducer, applyMiddleware(thunk))

reducers/index.ts

export const rootReducer = combineReducers({
    task: taskReducer,
})

export type RootState = ReturnType<typeof rootReducer>

reducers/taskReducer.tsx

const initialState: TaskState = {
    tasks: [],
    loading: false,
    error: null
}

export const taskReducer = (state = initialState, action: TaskAction): TaskState => {
    switch (action.type) {
        case TaskActionTypes.FETCH_TASKS:
            return {loading: true, error: null, tasks: []}
        case TaskActionTypes.FETCH_TASKS_SUCCESS:
            return {loading: false, error: null, tasks: action.payload}
        case TaskActionTypes.FETCH_TASKS_ERROR:
            return {loading: false, error: action.payload, tasks: []}
        default:
            return state
    }
}

action-creators/task.ts

export const fetchTasks = () => {
    return async (dispatch: Dispatch<TaskAction>) => {
        try {
            dispatch({type: TaskActionTypes.FETCH_TASKS})
            const response = await axios.get("") // The data is coming from the backend, I have hidden the data
            dispatch({type: TaskActionTypes.FETCH_TASKS_SUCCESS, payload: response.data})
        } catch (e) {
            dispatch({
                type: TaskActionTypes.FETCH_TASKS_ERROR,
                payload: 'Произошла ошибка при загрузке данных'
            })
        }
    }
}

types/task.ts

export interface TaskState {
    tasks: any[];
    loading: boolean;
    error: null | string;
}

export enum TaskActionTypes {
    FETCH_TASKS = 'FETCH_TASKS',
    FETCH_TASKS_SUCCESS = 'FETCH_TASKS_SUCCESS',
    FETCH_TASKS_ERROR = 'FETCH_TASKS_ERROR'
}

interface FetchTasksAction {
    type: TaskActionTypes.FETCH_TASKS;
}

interface FetchTasksSuccessAction {
    type: TaskActionTypes.FETCH_TASKS_SUCCESS;
    payload: any[]
}

interface FetchTasksErrorAction {
    type: TaskActionTypes.FETCH_TASKS_ERROR;
    payload: string;
}

export type TaskAction = FetchTasksAction | FetchTasksSuccessAction | FetchTasksErrorAction

useTypedSelector.ts

export const useTypedSelector: TypedUseSelectorHook<RootState> = useSelector

.json

{
  "name": "Project",
  "data": "2022",
  "task": {
    "id": 1,
    "title": "Apple",
    "start": "2021",
    "end": "2022",
    "sub": [
      {
        "id": 2,
        "title": "tomato",
        "start": "2021",
        "end": "2022",
        "sub": [
          {
            "id": 3,
            "title": "Orange",
            "start": "2019",
            "end": "2020",
            "sub": [
              {
                "id": 4,
                "title": "Banana",
                "start": "2022",
                "end": "2022",
                "sub": [
                  {
                    "id": 5,
                    "title": "Strawberry",
                    "start": "2015",
                    "end": "2018"
                  },
                  {
                    "id": 6,
                    "title": "cherry",
                    "period_start": "2001,
                    "period_end": "2003"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Unfortunately I am not able to edit this json file.

I can output all the data before sub, and after I can't output them. I need to output absolutely all the data from json.

I have tried many ways from the internet, but I have not succeeded

Answer 1

This is solution for how you convert nested object into single array, Please use in your code like this:

It will work like recursion function.

const obj = {
  name: 'Project',
  data: '2022',
  task: {
    id: 1,
    title: 'Apple',
    start: '2021',
    end: '2022',
    sub: [{
      id: 2,
      title: 'tomato',
      start: '2021',
      end: '2022',
      sub: [{
        id: 3,
        title: 'Orange',
        start: '2019',
        end: '2020',
        sub: [{
          id: 4,
          title: 'Banana',
          start: '2022',
          end: '2022',
          sub: [{
              id: 5,
              title: 'Strawberry',
              start: '2015',
              end: '2018',
            },
            {
              id: 6,
              title: 'cherry',
              start: '2001',
              end: '2003',
            },
          ],
        }, ],
      }, ],
    }, ],
  },
};

const arr = [];

const foo = (task) => {
  if (!task.id) return;
  arr.push({
    id: task.id,
    title: task.title,
    start: task.start,
    end: task.end,
  });

  if (task.sub && task.sub.length > 0) task.sub.forEach(item => foo(item));
};

foo(obj.task);

console.log('>>>>>  arr : ', arr);

Answer 2

I think what you are missing is the user of object.keys:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys

It allow you to return a array of keys of your object that you can map on.

What I suggest is doing something like this :

const GanttContainer: React.FC = () => {
    const {tasks, loading, error} = useTypedSelector(state => state.task)
    const dispatch: Dispatch<any> = useDispatch()


    useEffect(() => {
        dispatch(fetchTasks())
    }, [])

    if (loading) {
        return <h1>Идет загрузка...</h1>
    }
    if (error) {
        return <h1>{error}</h1>
    }

    return (
        ....
                {Object.keys(tasks).map((taskKeys, id) => {
                    return (
                    <div key={id}>
                        {tasks[taskKeys]}
                    </div>)
        ....
    );
};

export default GanttContainer;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>