Angular 没有显示数据（问题 json）

Question

我创建了一个应用程序，我在其中使用 spring mvc 和前端 angular 中的前端。

后端工作正常（使用 Postman 测试）但前端工作不正常。特别是后者没有向我显示 table.

中的客户列表

查看控制台时出现错误：

XMLHtt 的 JSON 位置 2 处 JSON.parse () 中的意外标记 c，文本：“[{codeperson=BNCLSN43B12F205R，姓氏=Bianchi，…ZLLSRN85B52L219T，姓氏=Zollino，姓名=萨布丽娜}

消息：“解析 http://localhost:8080/customerbuysproduct/customers-list 时 Http 失败”

后端响应：

[
    {codeperson=BNCLSN43B12F205R, surname=Bianchi, name=Alessandro
    },          
    {codeperson=CRLMRC85M17I921J, surname=Carlini, name=Marco
    }               
]

这里我输入了后台代码

后端：

道

@Override
    public List<Map<String, Object>> readViewListCustomerJson() {
        return jdbcTemplate.queryForList("SELECT codeperson,surname,name FROM customer");

    }

控制器

@RequestMapping(value  = {"/customers-list"}, method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)    
    public String getString() {
        return customerDao.readViewListCustomerJson().toString();       
    }

前端：

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomerListComponent } from './customer-list/customer-list.component';  

const routes: Routes = [
  { path: 'view-customer', component: CustomerListComponent }  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<div class="container p-3 my-3 bg-primary text-white">

  </div>
  
  <br>
  
  <div  class="container-fluid">  
        <ul class="navbar-nav">  
          <li class="nav-item ">  
            <a routerLink="view-customer" routerLinkActive="d-none" class="nav-link" class="btn btn-primary active" role="button" >Customers</a>  
          </li>   
                    
        </ul>  
        <router-outlet></router-outlet>  
    </div>

customers.service.ts

import { Injectable } from '@angular/core';  
import { HttpClient } from '@angular/common/http';  
import { Observable } from 'rxjs';  
import { Customer } from './customer';
  
@Injectable({  
  providedIn: 'root'  
})  
  
export class CustomerService {  
  
  private baseUrl = 'http://localhost:8080/customersbuysproduct/';  
  
  constructor(private http:HttpClient) { }  
  
  getCustomerList(): Observable<any> {  
    return this.http.get(`${this.baseUrl}`+'customers-list');  
  }  
    
}

我该如何解决这个错误？

屏幕截图

Answer 1

在您的代码中添加以下依赖项。

<dependency>
            <groupId>com.googlecode.json-simple</groupId>
            <artifactId>json-simple</artifactId>
            <version>1.1</version>
        </dependency>

并如下修改控制器。

@RequestMapping(value  = {"/customers-list"}, method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
@ResponseBody
    public String getString() {
        return JSONArray.toJSONString(customerDao.readViewListCustomerJson());
    }

Angular 没有显示数据（问题 json）

Angular doesn't show me the data (problem json)

backend

spring-mvc

angular