Trying to fetch items of Person or Group type column from another list in React Sharepoint?

Question

I want to fetch items of Person or Group type column from another list in React SharePoint but there is a restriction I cannot use it in a single query. So far I have only known using REST. So if anyone has any idea how to use nested calls and filtering the common items between both columns. OR Using another type of query can also be helpful for me.

I am trying to use this way of nested query though and so far it is fetching only from APP_NAME2 but I want common items from both lists:

rows1 and columns1 are the property of DataTable in react-data-table-component.

APP_NAME1 - BID(lookup column in APP_NAME2) and Temperature.

APP_NAME2 - ID, Created By (Field - Author).

private userData = () => {
    $.ajax({
      url: `${this.props.siteUrl}/_api/Web/Lists/GetByTitle('APP_NAME1')/items?$select=*,BookingID/ID&$expand=BookingID`,
      type: "GET",
      dataType: "json",
      headers: {
        accept: "application/json;odata=verbose",
      },
      success: (resultData) => {
        var listdata = {
          accounting: [],
        };
        console.log(resultData.d.results);
        $.each(resultData.d.results, (index, value) => {
            listdata.accounting.push({
              BookingID: value.BookingID.ID,
            });        
        });
        console.log(listdata.accounting);
        $.ajax({
          url: `${this.props.siteUrl}/_api/Web/Lists/GetByTitle('APP_NAME2')/items?$select=Title,Author/ID&$expand=Author&$filter=ID eq + BookingID`,
          type: "GET",
          dataType: "json",
          headers: {
            accept: "application/json;odata=verbose",
          },
          success: (resultData) => {
            var listData= {
              accounting: [],
            };
            console.log(resultData.d.results);
            $.each(resultData.d.results, (index, value) => {
              listData.accounting.push({
                Author: value.Title,
                BookingID: value.Author.ID,
              });
            });
            console.log(listData.accounting);
            this.columns1 = [
              {
                name: "Employee Name",
                selector: "Author",
              },
              {
                name: "ID",
                selector: "BookingID",
              },
            ];
            this.rows1 = listData.accounting;
            this.setState({ healthScreening: listData.accounting }, () => {});
          },
          error: (jqXR, textStatus, errorThrown) => {
            console.log("error");
          },
        })
      },
      error: (jqXHR, textStatus, errorThrown) => {
        console.log("error");
      },
    });
  }

Answer 1

Based on your last question at: Item not fetching using lookup in React Sharepoint,

You need to make nested REST calls to get the information from another list. Below are general steps you can perform to achieve this:

1. Make first REST call to get the information related to Booking item:

<siteUrl>/_api/Web/Lists/GetByTitle('APP_NAME')/items?$select=*,BookingID/ID&$expand=BookingID

2. Then in success function of first call, you can store list item id from booking ID to one variable (say bookingItemId) - like you are doing in above link to your previous question.

3. Then you can filter 2nd list like:

"<siteUrl>/_api/Web/Lists/GetByTitle('<Second list name>')/items?$select=Title,Author/ID&$expand=Author&$filter=ID eq " + <bookingItemId>

Replace <Second list name> with the name of your list and <bookingItemId> with your variable name.

Answer 2

You could call another Rest API in the success function of the first.

private userData = () => {
  $.ajax({
    url: `${this.props.siteUrl}/_api/Web/Lists/GetByTitle('APP_NAME1')/items?$select=*,BookingID/ID&$expand=BookingID`,
    type: "GET",
    dataType: "json",
    headers: {
      accept: "application/json;odata=verbose",
    },
    success: (resultData) => {
      var listdata = {
        accounting: [],
      };
      console.log(resultData.d.results);
      $.each(resultData.d.results, (index, value) => {
          listdata.accounting.push({
            BookingID: value.BookingID.ID,
          });  
          $.ajax({
            url: `${this.props.siteUrl}/_api/Web/Lists/GetByTitle('APP_NAME2')/items?$select=Title,Author/ID&$expand=Author&$filter=ID eq + ${value.BookingID.ID}`,
            type: "GET",
            dataType: "json",
            headers: {
              accept: "application/json;odata=verbose",
            },
            success: (resultData) => {
              var listData= {
                accounting: [],
              };
              console.log(resultData.d.results);
              $.each(resultData.d.results, (index, value) => {
                listData.accounting.push({
                  Author: value.Title,
                  BookingID: value.Author.ID,
                });
              });
              console.log(listData.accounting);
         //I think you need to modify here.
              this.columns1 = [
                {
                  name: "Employee Name",
                  selector: "Author",
                },
                {
                  name: "ID",
                  selector: "BookingID",
                },
              ];
              this.rows1 = listData.accounting;
              this.setState({ healthScreening: listData.accounting }, () => {});
            },
            error: (jqXR, textStatus, errorThrown) => {
              console.log("error");
            },
          })      
      });
      console.log(listdata.accounting);
      
    },
    error: (jqXHR, textStatus, errorThrown) => {
      console.log("error");
    },
  });
}

Because I don’t know the structure of the return value of your request, I can’t modify the values of some variables in the code. I can only modify what I think is wrong.