1

Trying to get data from SharePoint online using spfx react ..

const { siteurl } = this.props;

let requestUrl = siteurl.concat(
  "/_api/web/Lists/GetByTitle('Shoping%20CartItems')/items"
);
// Get users with givenName, surname, or displayName
this.context.spHttpClient
  .get(requestUrl, SPHttpClient.configurations.v1)
  .then(response => {
    return response.json();
  })
  .then(json => {
    // Prepare the output array

    // Log the result in the console for testing purposes
    console.log(json);
    // Map the JSON response to the output array
    json.value.map((item: any) => {});
  })
  .catch(error => {
    console.error(error);
  });

getting error --

ShopingCart.tsx:65 Uncaught (in promise) TypeError: Cannot read property 'get' of undefined at ShopingCart.fetchDatafromSharePointList (ShopingCart.tsx:65) at ShopingCart.

Improve this question
4
  • quick question: why do you write your requests manually and don't use instead the fluent API provided by pnp.github.io/pnpjs/pnpjs/docs ?
    – baywet
    Commented Jan 25, 2019 at 13:31
  • Can I use sppnp Js with react ? Or what will be the best practices to fetch data from SharePoint online spfx react .
    – BISWANATH HALDER
    Commented Jan 25, 2019 at 16:07
  • react is a UI framework to help you render and display the information on the screen to put it roughly. pnpjs is a fluent API wrapping the REST API. They do not conflict or overlap at all, and combining them for SPFx projects is usually the suggested approach.
    – baywet
    Commented Jan 25, 2019 at 16:36
  • I am having problem while looping ... getting always extra button . please help . <div key={myitems1.Id}> <span>{myitems1.Item_x0020_Name}</span> <button onClick={e => this.dosometing(myitems1.Id)}> Offline </button> </div> Getting always extra and
    – BISWANATH HALDER
    Commented Jan 25, 2019 at 18:53

1 Answer 1

Reset to default
1

Even though this doesn't directly answer the question the recommendation would be to leverage pnpjs fluent API instead of crafting the requests manually.
This reduced maintenance burden as well as the risk of errors.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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