ASP NET CORE with ANGULAR -"Unexpected character encountered while parsing value: a. Path '', line 0, position 0." / Error during a PUT Request

Question

Backend - ASP NET CORE 5. Frontend - Angular 2. The logic is for a simple Search through a list in the database. The Issue that I am encountering is during a PUT (also tried a POST) request. The issue is the following : 0: "Unexpected character encountered while parsing value: a. Path '' (Status code 400). The Api works correctly (tested with postman), but when I try to make the request through the angular app I encounter that issue. Note: Doesn't reach the method in the Controller it seems. Where it seems to be the problem ?

Thank you.

Angular:

TS Component:
searchBar = new FormControl('',[Validators.maxLength(50),Validators.required])
getSearchedJobs(){
    console.log(this.searchBar.value)
    this.informationService.getCompaniesSearchedByUser(this.searchBar.value).subscribe(response=>{
      this.jobs = response;
    }); 
  }

HTML Component:          
<form class="form-group row ml-2" (ngSubmit)="getSearchedJobs()">
                <button type="submit" class="btn btn-primary">Search</button>
                <div class="ml-2"><input type="search" [formControl]="searchBar" class="form-control"></div>  
</form>

Service Component:
httpOptions = {
    headers: new HttpHeaders({
      'Content-Type':  'application/json'
    })
  };
getCompaniesSearchedByUser(model: any) {
    console.log(model);
    return this.http.put(this.baseUrl + "information/search-jobs-setbyusers/", model,this.httpOptions);
  }
Seems that if I don't add the content-type will give me Status Code Error 415

NET:

Controller:
       [HttpPut("search-jobs-setbyusers")]
        public async Task<ActionResult<IEnumerable<GetCompaniesJobsLinksDto>>>SearchJobs([FromBody]SearchJobsDto searchJobsDto)
        {

            if(String.IsNullOrEmpty(searchJobsDto.SearchJob))
            {
                return NotFound("Please try to add something in the search bar !");
            }
            var jobs = await _informationRepository.SearchJob(searchJobsDto.SearchJob.ToLower());
            if(!jobs.Any())
            {
                return NotFound("Nothing was found !");
            }

            return Ok(jobs);
        }
    }

SearchJobsDto: (contains only a string)
 [MaxLength(50)]
        public string SearchJob { get; set; }

Looks like it fails trying to convert string to Json value. Possibly you are not passing JSON to DeserializeObject. — Siva Makani
– Siva Makani, Commented Aug 17, 2021 at 10:20
But what I can do in these case ? because I did tried to pass in Angular App JSON.stringify(model) and now I'm getting the following error: 0: "Error converting value \"about\" to type 'API.DTOs.InformationDTOs.SearchJobsDto'(Status code 400) (Value "about" is what I added in the input) Why it fails just in these case to convert the object ? — SilviuM
– SilviuM, Commented Aug 17, 2021 at 15:32
Issue was fixed, you can have a look down in the last comments. I added the solution. Thank you. @Siva Makani — SilviuM
– SilviuM, Commented Aug 18, 2021 at 4:55

Andrew Halil · Accepted Answer · 2021-08-17 11:02:37Z

1

An HTTP PUT requires you to include an ID in the URI:

information/search-jobs-setbyusers/{id}

(See also https://restfulapi.net/rest-put-vs-post/)

So, you could try an HTTP POST.

The following is worth trying:

export class SearchJobsDto
{
    public SearchJob: string;
}

getCompaniesSearchedByUser(searchString: string) 
{
   let model: SearchJobsDto = { searchString: SearchJob }
   return this.http.post(this.baseUrl + "information/search-jobs-setbyusers/", model, this.httpOptions);
}

and the controller method as a POST:

[HttpPost("search-jobs-setbyusers")]
public async 
   Task<ActionResult<IEnumerable<GetCompaniesJobsLinksDto>>>SearchJobs(
      [FromBody]SearchJobsDto searchJobsDto)
{
   ...
}

The error is likely due to one or both of these:

Passing an Any type parameter for the model which would give the parsing error when resolving binding of the parameter type to the type of the model parameter in the API controller method. An explicit type for the parameter passed in the POST/PUT model is best practice.
Not including an ID for the HTTP PUT with the model payload parameter.

answered Aug 17, 2021 at 11:02

Andrew Halil

1,33915 gold badges20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SilviuM Over a year ago

Seems that the problem was from here: searchBar = new FormControl('',[Validators.maxLength(50),Validators.required]). Having only one input and not a group form and than sending the value like this directly: this.searchBar.value, cannot convert it to my class SearchJobsDto (NET). So my solution is mostly the same like yours, but I put the logic in the component like: let model = SearchJobs() (SearchJobs being a class that contains searchBar) and than model.searchBar = this.searchBar.value and after I did send it to my services. (this.informationService.getCompaniesSearchedByUser(model).sub()

SilviuM Over a year ago

SearchJobs DTO in the Angular app (model). In this case must be declared as a class and not as a interface. As a quick note work also with POST. Issue was fixed. Thank you. @Andrew Halil

Collectives™ on Stack Overflow

ASP NET CORE with ANGULAR -"Unexpected character encountered while parsing value: a. Path '', line 0, position 0." / Error during a PUT Request

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related