1

I would like to get a specific item by ID. I'm really stuck how I can retrieve this item.

I called the list and tried to save it in an object and then should in the render() function.

Here is my code so far:

import * as React from 'react';
import styles from './Webpartprojectsw.module.scss';
import { ISolypListItemState } from './ISolypListItemState';
import { IWebpartprojectswProps } from './IWebpartprojectswProps';
import { escape } from '@microsoft/sp-lodash-subset';
import * as jquery from 'jquery';
import { TextField, PrimaryButton } from '@fluentui/react';
import {ISPHttpClientOptions, SPHttpClient,SPHttpClientResponse} from '@microsoft/sp-http';
import { ISolypListItem } from './ISolypListItem';

  export default class Webpartprojectsw extends 
React.Component<IWebpartprojectswProps,ISolypListItemState> {

static websiteurl: string="";
public constructor(props:IWebpartprojectswProps, state: ISolypListItemState){
   super(props);
   this.state={
       status:"ready",
       SolypProjectItem:{
           Id: 0,
           Title: "",
           StartDate:"",
           EndDate:"",
           ProjectPhase:"",
           TrafficLight:""

       }
   };
Webpartprojectsw.websiteurl=this.props.websiteurl;
 };


 public componentDidMount(): void {
   let reactcontexthandler = this;
   console.log("Link zur Seite:" + Webpartprojectsw.websiteurl);
   jquery.ajax({
 url:`${Webpartprojectsw.websiteurl}/_api/web/lists/getbytitle('ProjectStatusList')/items(1)`,
        type: "GET",
        headers: {'Accept':'application/json;odata=verbose;'},
        success: function (resultData){
          console.log(resultData);
          reactcontexthandler.setState({
          SolypProjectItem: resultData.d.results[0]
          });
        },
        error: function (jqXHR,textStatus,errorThrown){

        }

   });

 }



public render(): React.ReactElement<IWebpartprojectswProps> {
return (
   <div>
     {this.state.SolypProjectItem.Title}
     {this.state.SolypProjectItem.StartDate}
     {this.state.SolypProjectItem.EndDate}
   </div>      
      
   );
  }

 }

Here is my interface:

export interface ISolypListItem{
Id: number;
Title: string;
StartDate: string;
EndDate: string;
ProjectPhase: string;
TrafficLight: string;
}

and my State:

import { ISolypListItem } from "./ISolypListItem";

export interface ISolypListItemState{
   status: string;
  SolypProjectItems: ISolypListItem[];
  SolypProjectItem: ISolypListItem;
}

I don't exactly how I can put the retrieved element into the object and then use in the HTML.

1
  • Are you getting correct results in success function of ajax call? Jun 4, 2022 at 7:16

1 Answer 1

0

When you are fetching a specific list item using items(<item-id>) endpoint you get the results in resultData.d instead of resultData.d.results.

For Example:

enter image description here


So, change your success function like this:

success: function (resultData) {
             reactcontexthandler.setState({
                 SolypProjectItem: resultData.d
             });
         },
8
  • That's great! I try to use this.
    – Matthias
    Jun 5, 2022 at 11:47
  • Is this working for you? Jun 5, 2022 at 11:49
  • No, I get an error message that says that My variable is undefined:Cannot read properties of undefined (reading 'Id'). Do you have an idea where it is coming from?
    – Matthias
    Jun 6, 2022 at 8:31
  • Are you getting correct results in resultData variable? check by adding console.log(resultData). Jun 6, 2022 at 8:58
  • 1
    Nope. this time it's working fine and I only get one value. thanks
    – Matthias
    Jun 6, 2022 at 13:24

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.