CODEWITHSUNDEEP
reactjsapisharepoint
Dhanjay Bhardwaj
Dhanjay Bhardwaj

Reputation: 86

Retrieve data and display from two different table/lists in react sharepoint

I have 2 different data in 2 different table/lists [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,
          });
        });

Upvotes: 0

Views: 416

Answers (1)

Baker_Kong
Baker_Kong

Reputation: 1889

You can join this 2 requests using Promise.all():

let promise1= $.ajax({url: ".../_api/Web/Lists/GetByTitle('APP_NAME1')/items?..."});
let promise2= $.ajax({url: ".../_api/Web/Lists/GetByTitle('APP_NAME2')/items?..."});

Promise.all([promise1, promise=2]).then((values) => {
  console.log(values[0]);
  console.log(values[0]);
});

In the callback, you can merge this 2 array via a loop.

Demo:

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;
    }
  }
}

Reference:

Upvotes: 1

Related Questions