How to format nested array field

[jqwidgetuserParticipant]

The server returns the array of users. Each user has two string fields ID and email and one array field tasks:

users: {
  ID: "5f31b39eb2b316435a8a91f5",
  email: 'Elio.Petersen@yahoo.com',

  tasks: [
    {
      task_name: "Task_A",
      ID: "5f31b39eb2b316435a8a91f3",
    },
    {
      task_name: "Task_B",
      ID: "5f31b39eb2b316435a8a91f3",
    }
  ]
}

I have defined the datafields for jqxgrid:

  datafields:
    [
      { name: 'ID', type: 'string' },
      { name: 'email', type: 'string' },
      { name: 'tasks', type: 'array' }
    ] 

jqxgrid renders the user ID and email correctly. But the tasks column cell shows [object Object].
Instead I would like to display the Task_A, Task_B which are values stored in each task in task_name attribute.

Is it possible to achieve? How?

[HristoParticipant]

Hello jqwidgetuser,

I would like to mention that we have a lot of similar topics in our forum that could be useful.
Please, take a look at this topic:
https://www.jqwidgets.com/community/topic/nested-json-with-jqxinput/
Also, I would like to suggest you look at this tutorial:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm
Please, let me know if you still have trouble with this.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[jqwidgetuserParticipant]

Thank you for the links!
With the nested task JSON data object attribute storing single dictionary I can map: 'task>task_name'

users: {
  ID: "5f31b39eb2b316435a8a91f5",
  email: 'Elio.Petersen@yahoo.com',

  task:
    {
      task_name: "Task_A",
      ID: "5f31b39eb2b316435a8a91f3",
    }
}

    datafields:
    [
      { name: 'tasks', map: 'task>task_name' },
    ]

The JSON object in my case has many tasks

users: {
  ID: "5f31b39eb2b316435a8a91f5",
  email: 'Elio.Petersen@yahoo.com',

  tasks: [
    {
      task_name: "Task_A",
      ID: "5f31b39eb2b316435a8a91f3",
    },
    {
      task_name: "Task_B",
      ID: "5f31b39eb2b316435a8a91f3",
    }
  ]
}

The map: 'task>task_name' doesn’t work with nested array field tasks here because map references to a single task using a task.task_name path. To deal with the array tasks I have to use the index of element in the tasks array, such as tasks[index].task_name.

What is the syntax or an approach to make map: support an array of objects in the nested JSON field tasks? Is there a reserved word for the index?

[adminKeymaster]

Hi jqwidgetuser,

The DataGrid does not have built-in solution to display this kind of data. It will need to be mutated/transformed before binding it to the DataGrid.
My suggestion is when you receive the data from the server, loop through the data and prepare a local array with the records which you want to display in the DataGrid. After that, bind that local array to the DataGrid.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[jqwidgetuserParticipant]

Thanks for a quick response!

I went ahead and implemented it using beforeLoadComplete:

  let users = {
    ID: "5f31b39eb2b316435a8a91f5",
    email: 'Elio.Petersen@yahoo.com',

    tasks: [
      {
        task_name: "Task_A",
        ID: "5f31b39eb2b316435a8a91f3",
      },
      {
        task_name: "Task_B",
        ID: "5f31b39eb2b316435a8a91f3",
      }
    ]
  }  

  source: any =
  {
    datatype: 'json',
    datafields:
      [
        { name: 'ID', type: 'string' },
        { name: 'email', type: 'string' },
        { name: 'tasks', type: 'array' }
      ], 
    url: "https://www.mydomain.com/data",
    cache: false,
    root: 'Rows',

    beforeLoadComplete: (data: any, dwnData: any) => {
      let _data = [];
      for (let i = 0; i < data.length; i++) {
          let item = data[i];

          let _tasks = [];
          for (let n = 0; n < item.tasks.length; n++) {
            _tasks.push(item.tasks[n].task_name);
          };
          item["tasks"] = _tasks; 
          _data.push(item);
      }
      return _data;
    },
}

[Author]

Posts