JqGrid populate Main grid and subgrid with 2 different JSON response with Local data type

Question

I followed this example and it works like a charm,

jqGrid Subgrid with "local" Data

but now what I would like to avoid the "nested Json response" format and :

• populate the main grid with one Json response (in a var )
• populate the subgrid with a different Json response (in another var)

by matching ID's in both JSON responses.

For example :

This one for the main grid (i'm working with local data type):

var Maingrid = [{'id': 1, 'first_name': 'Greg', 'last_name': 'JEAN'}, 
{'id': 2, 'first_name': 'Paul', 'last_name': 'Martin'},
{'id': 3, 'first_name': 'Georges', 'last_name': 'Linc'},
{'id': 4, 'first_name': 'Bill', 'last_name': 'Evans'}]

And this one for the subgrid :

var Subgrid = [{'idref': 1, 'flavour': 'chocolate', 'temp': 'true'},
{'idref': 2, 'flavour': 'vanilla', 'temp': 'false'},
{'idref': 2, 'flavour': 'peanut', 'temp': 'false',
{'idref': 4, 'flavour': 'mint', 'temp': 'false'}]

would result like this

I want to check the common ID's between the var Maingrid ID and var Subgrid IDREF and when a correspondance is find, populate the table.

Answer 1

You already have the 50% solution when you say filter. Using array filter will do what you want

var Subgrid = [{'idref': 1, 'flavour': 'chocolate', 'temp': 'true'},
{'idref': 2, 'flavour': 'vanilla', 'temp': 'false'},
{'idref': 2, 'flavour': 'peanut', 'temp': 'false',
{'idref': 4, 'flavour': 'mint', 'temp': 'false'}]
 
 grid.jqGrid({
 ...
subGrid: true,
subGridRowExpanded: function (subgridDivId, rowId) {
    var subgridTableId = subgridDivId + "_t";
    $("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");

    var result = Subgrid.filter(item => item.idref == rowId);

    $("#" + subgridTableId).jqGrid({
        datatype: 'local',
        data: result
        colNames: [....],
        colModel: [....]
        ...
    });
....

});