I'm currently making News Listing Web Part, where News are made as custom content type. I managed to get the basic fields like id, title, but others are really bothering me. The API fetches all the data, and I checked that through console.log.
INewsPics.ts
import { HtmlHTMLAttributes, ReactHTML } from "react";
export interface INewsPics {
Title: any;
FileLeafRef: any;
Id: any;
BT_News_Publishing_Date: any;
PublishingImage: any;
NewsArticle: any;
}
LatestNews.tsx
export default class LatestNews extends React.Component<ILatestNewsProps, any> {
constructor() {
super();
this.state = {
newsst: []
};
}
// tslint:disable-next-line:typedef
public componentDidMount() {
// read items from json func
this._getNewsFeed();
}
// tslint:disable-next-line:typedef
public componentDidUpdate(prevProps, prevState) {
if (this.props.NewsCounter !== prevProps.NewsCounter ||
this.props.listName !== prevProps.listName)
// tslint:disable-next-line:one-line
{
this._getNewsFeed(); // if wp props settings compare were changed previous state and reload
}
}
public render(): React.ReactElement<ILatestNewsProps> {
return (
<div className="ArticleNewsWp">
<NewsCard header={this.props.title}
list={this.props.listName}
surl={this.props.siteurl}
CharCounter={this.props.CharCounter}
items={this.state.newsst} />
</div>
);
}
public _getNewsFeed(options?: any): Promise<INewsPics[]> {
return new Promise<INewsPics[]>((resolve: any) => {
pnp.setup({
sp: {
headers: {
"Accept": "application/json; odata=verbose"
}
}
});
var SHAREPOINT_LIST: string = this.props.listName;
var SHAREPOINT_MAX: string = this.props.NewsCounter;
pnp.sp.web.lists.getByTitle(SHAREPOINT_LIST).items
// tslint:disable-next-line:max-line-length
.filter("ContentType eq 'BT_News_Feeds'")
.top(Number(SHAREPOINT_MAX))
.orderBy("BT_News_Publishing_Date", false)
.get().then((response: any) => {
let items: INewsPics[] = [];
let promises: Promise<any>[] = [];
// tslint:disable-next-line:typedef
response.forEach(function (item: INewsPics) {
// tslint:disable-next-line:max-line-length
// tslint:disable-next-line:typedef
let promise = pnp.sp.web.lists.getByTitle(SHAREPOINT_LIST).items
.getById(item.Id).fieldValuesAsHTML
// tslint:disable-next-line:max-line-length
.select("Id", "Title", "FileLeafRef", "BT_News_Image", "BT_News_Publishing_Date", "BT_News_Article").get();
promises.push(promise);
promise.then((response: any) => {
// tslint:disable-next-line:max-line-length
items.push({ Id: item.Id, Title: item.Title, FileLeafRef: item.FileLeafRef, PublishingImage: item.PublishingImage, BT_News_Publishing_Date: item.BT_News_Publishing_Date, NewsArticle: item.NewsArticle });
});
console.log(item.BT_News_Publishing_Date);
});
Promise.all(promises).then((items: INewsPics[]) => {
this.setState({ newsst: items });
resolve(items);
console.log(items);
});
});
});
}
}
NewsCard.tsx
export class NewsCard extends React.Component<any, any> {
// tslint:disable-next-line:typedef
private _redirectToPage(event, itemId, SHAREPOINT_LIST) {
try {
location.href = this.props.surl + "/" + SHAREPOINT_LIST + "/" + itemId;
console.log(location.href);
}
// tslint:disable-next-line:one-line
catch (e) {
if (itemId === "undefined")
// tslint:disable-next-line:one-line
{
location.href = this.props.surl + "/" + SHAREPOINT_LIST + "/" + "PageNotFoundError.aspx";
console.log(e);
}
}
}
public render(): JSX.Element {
// tslint:disable-next-line:typedef
var regex = /<img.*?src=['"](.*?)['"]/;
var SL: string = this.props.list;
var CH: string = this.props.CharCounter;
// tslint:disable-next-line:typedef
var finalArticle;
var col: any = (this.props.items) ? this.props.items : [];
return (
<div className={styles.container}>
<h3>{this.props.header}</h3>
{
col.map((item: INewsPics) => {
console.log("Publishing date:" + item.BT_News_Publishing_Date + " Title:" + item.Title);
// tslint:disable-next-line:typedef
var itemstring: any = (item.PublishingImage).toString();
// tslint:disable-next-line:typedef
var itemstringArticle: any = (item.NewsArticle).toString();
// tslint:disable-next-line:typedef
function strip(itemstringArticle) {
// tslint:disable-next-line:typedef
var resRndrArticle = new DOMParser().parseFromString(itemstringArticle, "text/html");
return resRndrArticle.body.textContent || "";
}
// tslint:disable-next-line:typedef
finalArticle = strip(itemstringArticle);
finalArticle = finalArticle.substring(0, CH);
return (
<div className={styles.container}>
<div className={styles.stapler}>
<div className={styles.NewsLeft}>
<img className={styles.newsimage} src={regex.exec(itemstring)[1]} alt="" />
</div>
<div className={styles.NewsRight}>
<b>{item.Title}</b>
<p>{finalArticle}
<b className={styles.Rm} onClick={(event) =>
this._redirectToPage(event, item.FileLeafRef, SL)}> [... More]</b></p>
<b className={styles.NDate}>Article Date: {item.BT_News_Publishing_Date}</b>
</div>
</div>
<hr/>
</div>
);
})
}
</div>
);
}
}
When I try to render the content in NewsCard.tsx, it says that PublishingImage, NewsArticle and BT_News_Publishing_Date are undefined. Three things that render are Id, Title and FileLeafRef.
