Below CAML query not working in SPFx.Returns Error : Invalid JSON

[paraggin]

What type of issue is this?

Question

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [ ] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Issue description

Below is the code How to fix this. Need to retrive sharepoint list data with filtering

async usingCAML() { const camlQuery = <View><Query><Where><And><Eq><FieldRef Name="Category"/><Value Type="Choice">Taxes</Value></Eq><Membership Type="CurrentUserGroups><FieldRef Name="All Financial Advisory Users DG"/></Membership></And></Where><OrderBy><FieldRef Name="AppName" Ascending="TRUE"/></OrderBy></Query></View>;

try {
  const items = await sp.web.lists
    .getByTitle("Business Apps")
    .getItemsByCAMLQuery({ ViewXml: camlQuery });
  console.log("CAML 111 : ", items);
} catch (error) {
  console.log("CAMLERROR 111 : ", error);
}

const body = {
  query: {
    ViewXml: camlQuery,
  },
};

const options = {
  body: JSON.stringify(body),
};
const tenantUrl = common.getTenantUrl(
  this.props.context.pageContext.web.absoluteUrl
);
await this.props.context.spHttpClient
  .post(
    `${tenantUrl}/sites/Corporate-Technology/sandbox/_api/web/lists/getbytitle('Business%20Apps')/GetItems`,
    SPHttpClient.configurations.v1,
    options
  )
  .then(async (response: SPHttpClientResponse) => {
    console.log("CAML 1 : ", await response.json());
    //return response.json();
  });

}

[mkm17]

Hi @paraggin, I think that the first call using PnP.js should work fine. Could you provide some more details about the error? A screenshot from the network tab or console would be helpful.

GitHub has changed the formatting of the code, but I understand that the code looks like this.

const camlQuery = '<View><Query><Where><And><Eq><FieldRef Name="Category"/><Value Type="Choice">Taxes</Value></Eq><Membership Type="CurrentUserGroups><FieldRef Name="All Financial Advisory Users DG"/></Membership></And></Where><OrderBy><FieldRef Name="AppName" Ascending="TRUE"/></OrderBy></Query></View>';
  try {
    const items = await sp.web.lists
      .getByTitle("Task")
      .getItemsByCAMLQuery({ ViewXml: camlQuery });
    console.log("CAML 111 : ", items);
  } catch (error) {
    console.log("CAMLERROR 111 : ", error);
  }