0

I have 2 different data in 2 different table [One is APP_NAME1 and other is in APP_NAME2]. In one table I have Name and ID and in other one I have kit, ID, Temperature. Is there any way to fetch and display data from 2 tables into 1.

I can fetch details from one table or APP_NAME1 like this:

$.ajax({
      url: `${this.props.siteUrl}/_api/Web/Lists/GetByTitle('APP_NAME1')/items`,
      type: "GET",
      dataType: "json",
      headers: {
        accept: "application/json;odata=verbose",
      },
      success: (resultData) => {
        var outputData = {
          accounting: [],
        };
        console.log(resultData.d.results);
        $.each(resultData.d.results, (index, value) => {
          outputData.accounting.push({
            Name: value.Name,
          });
        });
2
  • Nope. That was my second way of putting question but I have deleted that – Dhanjay Bhardwaj Nov 19 '20 at 12:43
  • 1
    The answer from the simple is right: "You have to fetch each table data first and then merge them". However, the question of "how do I make two separate jQuery ajax requests and then merge the data once they are both complete" is not really SharePoint specific, and might be more appropriate on stackoverflow.com, although my guess is that you will probably be able to find plenty of examples already out on the internet if you search for it. – Dylan Cristy Nov 19 '20 at 15:21
0

You have to fetch each table data first and then merge them with the code.

Once you have the processed data, use it to render the final table.

the merging might look something like this:

let finalTableData = [];
for(let i = 0; i < itemsA.length; i++)
{
  let lastIndex = finalTableData.push( {id: itemsA[i]["id"], prop1: itemsA[i]["prop1"]});

  for(let j = 0; j < itemsB.length; j++)
  {
    if(itemsB[j]["id"] === itemsA[i]["id"])
    {
      finalTableData[lastIndex]["propc"] = itemsB[j]["propc"];
      break;
    }
  }
}
0

You can use promise.all() to initiate multiple requests, and then process multiple request return values at once.

   const promise1 = Promise.resolve(3);
    const promise2 = 42;
    const promise3 = new Promise((resolve, reject) => {
      setTimeout(resolve, 100, 'foo');
    });
    
    Promise.all([promise1, promise2, promise3]).then((values) => {
      console.log(values);
// expected output: Array [3, 42, "foo"]
    });

You can use this method to generate Promise objects.

   function _ajax(requestURL){
        return new Promise((resolve, reject) => {
         $.ajax({
  url: requestURL,
  type: "GET",
  headers: {
    "Accept": "application/json;odata=verbose"
    
  },
             success: function(data) {
        resolve(data)
      },
      error: function(error) {
        reject(error)
      }
})
     })
    }

More reference about Promise for your reference:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Not the answer you're looking for? Browse other questions tagged or ask your own question.