CODEWITHSUNDEEP
reactjsapirestsharepoint
Dhanjay Bhardwaj
Dhanjay Bhardwaj

Reputation: 86

Display data in a single table in React Sharepoint from two REST API or from 2 different getbytitle name

I have 2 columns in 1 API/URL [i.e. - Name and ID] and 3 columns in 2 API/URL [i.e ID, Supply and Temperature]. How to concatenate columns from these 2 API/URL to display data on webpage using ajax REST API get method.

In other words, my one set of data is in APP_NAME1 and other is in APP_NAME2

Upto now this type of API I have been using:

 $.ajax({
      url: `${this.props.siteUrl}/_api/Web/Lists/GetByTitle('APP_NAME')/items?$filter=Name eq '${this.state.Name}'`,
      type: "GET",
      dataType: "json",
      headers: {
        accept: "application/json;odata=verbose",
      },
      success: (resultData) => {
        var outputData = {
          accounting: [],
        };
      console.log(resultData.d.results);
      }
});

Upvotes: 0

Views: 502

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

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

Demo: left join

for(let i = 0; i < itemsA.length; i++)
{
  let hassameid= itemsB.find(element => element['id'] == itemsA[i]["id"]);
  if(hassameid){
     itemsA[i]["tableB_pro01"]= hassameid["tableB_pro01"];
  }  
}

Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Upvotes: 1

Related Questions