How get sharepoint list items by view(s) in spfx?

Question

I use spfx in version 1.8.2 and I use @pnp/sp already to fetch views, but this gives me only properities of views, but I need items of list with are visible on sharepoint list in those views.

sp.web.lists
    .getByTitle("List")
    .views.getByTitle("BySomething").get().then(v => {
                console.log(v);
    });

I take it from this site https://github.com/SharePoint/PnP-JS-Core/wiki/Working-With:-Views

So I am looking for help or tips, link how do that?

Answer 1

I am afraid you can't get items directly from view. You will get viewQuery field from below method using v.ViewQuery. then you have to use getItemsByCAMLQuery method to get items. Below are reference methods.

Main method calling resua

public getListViewData():void{
    let listName = "Custom List"; //The display name of the sharepoint list.
    let viewName = "All Items"; //The View Name

    getViewQueryForList(listName,viewName).then((res:any) => {
        getItemsByViewQuery(listName,res).then((items:ISPLists[])=>{
            items.forEach((item:ISPLists) => {
                this.domElement.innerHTML += item.Title + "<br/>";
            });
        })
    }).catch(console.error);
}

//First method that retrieves the View Query
public static getViewQueryForList(listName:string,viewName:string):Promise<any> {
    let listViewData = "";
    if(listName && viewName){
        return pnp.sp.web.lists.getByTitle(listName).views.getByTitle(viewName).select("ViewQuery").get().then(v => {
            return v.ViewQuery;
        });
    } else {
        console.log('Data insufficient!');
        listViewData = "Error";
    }
}


//Second method that retrieves the View data based on the View Query and List name
public static getItemsByViewQuery(listName:string, query:string):Promise<any> {
    const xml = '<View><Query>' + query + '</Query></View>';  
    return pnp.sp.web.lists.getByTitle(listName).getItemsByCAMLQuery({'ViewXml':xml}).then((res:SPHttpClientResponse) => {
        return res;
    })
}

Ref link - https://wowsomuch.com/sharepoint/pnp-js-caml-query/