how to map two different objects and display in ag-grid in angular

Question

I am providing the sample working data and having two objects

vlist=[
  {

    "city": "Mumbai",
    "offers": {
      "1": {
        "status": "true",
        "price": 100
      },
      "2": {
        "status": "true",
        "price": 100
      }
    }
  }
]

products=[
  {
    "productID": 1,
    "productName": "pespsi"
  },
  {
    "productID": 2,
    "productName": "coke
  },
  {
    "productID": 3,
    "productName": "thubs up"
  }

]

In the above provided objects I need to map the product name with product id in products objects with respective objects in the "vlist". and my main objective is how to display those values using ag-grid.

Here is my column def:

columnDefs = [{
    headerName: 'productname', field: 'productname', filter: true, resizable: true
  },{
    headerName: 'price', field: 'price', filter: true, resizable: true
  }, {
    headerName: 'status', field: 'status', filter: true, resizable: true
  }
];

Expecting result like this:

productname     price    status
pespsi          100      true
coke            100      true
thumbsup        100      true

Vlist like this:

vlist=[
  {

    "city": "Mumbai",
    "offers": {
      "pespsi": {
        "status": "true",
        "price": 100
      },
      "coke": {
        "status": "true",
        "price": 100
      }
    }
  }
]

Answer 1

var details = [];
for (var i = 0; i < products.length; i++) {
    var product = products[i];
    var item = vlist[0].offers[''+product.productID];
    details.push({
        productName: product.productName,
        ...item
    });
}

now you should pass the details to ag-grid.