I am trying to get items from a links list with managed metadata. I am getting an error 'response.map is not a function'. I have used the sample from this the following answer to get the data using RenderListDataAsStream (SPFX - cannot get actual label of managed metadata list field). I can get the data - I can see it in the console - so I know that the caml query works, but can't seem to map the results, as I get the error 'response.map is not a function'
There is my code:
import * as React from 'react';
import styles from './LinksWp.module.scss';
import { ILinksWpProps } from './ILinksWpProps';
import { escape } from '@microsoft/sp-lodash-subset';
import pnp from "sp-pnp-js";
import { ClassListItems } from './ClassListItem';
import { ISPListItem } from './IListItems';
import { sp, RenderListDataParameters, RenderListDataOptions } from '@pnp/sp';
export default class LinksWp extends React.Component<ILinksWpProps, any> {
public constructor(props:ILinksWpProps,any)
{
super(props);
this.state={
items:[]
}
}
public render(): React.ReactElement<ILinksWpProps> {
return (
<div><h1>{this.props.description}</h1>
<div>{this.state.items.map(function(item:ISPListItem){
return(
<div>
<span><a href={item.URL.Url}>{item.URL.Description}</a></span>
</div>
)
})}</div>
</div>
);
}
public componentDidMount(){
this._getListItems();
}
private _getListItems():void
{
/*
pnp.sp.web.lists.getByTitle('Quick Links').items.get()
.then
((response)=>{
let listItemCollection = response.map(item=>new ClassListItems(item));
this.setState({items: listItemCollection});
}
)*/
pnp.sp.web.lists.getByTitle('Quick Links').renderListDataAsStream({
RenderOptions: RenderListDataOptions.ListData,
ViewXml : `<View><Query><Where><Eq><FieldRef Name='Function' />
<Value Type='TaxonomyFieldTypeMulti'>Group IT</Value></Eq></Where></Query><ViewFields>
<FieldRef Name='URLwMenu2' /><FieldRef Name='Region' />
<FieldRef Name='Function' /><FieldRef Name='Geography' />
</ViewFields><QueryOptions />
</View>`
}).then
((response)=>{
console.log(response)
let listItemCollection = response.map(item=>new ClassListItems(item));
this.setState({items: listItemCollection});
}
)
}
}
I have defined an interface and a class for this as well
import { ISPListItem } from "./IListItems"
export class ClassListItems {
public URL;
public Region;
public Function;
public Geography;
constructor(item: ISPListItem) {
this.URL = item.URL;
this.Region = item.Region;
this.Function = item.Function;
this.Geography = item.Geography;
}
}
export interface ISPListItem{
URL;
Region : string;
Function : string;
Geography : string;
}