我是jsog的新手，但我知道它可以帮助从后端到前端生成数组对象。而不是数组第一个元素后面的对象我得到了这样的引用，
0:{@ id: ' 1 ', id: 1,价值:卡尔加里,地区:{…},社区:数组(1),…}1：{@ref:‘4’}
我应该怎么做才能从数组中得到所有的对象，而不仅仅是第一个元素?
反应class Neighborhood extends Component {
//to load data upon generation.
constructor(props){
super(props);
this.state = {
neighborhoodError: '' ,cityList:[],cityFilterList:[],
neighborhood:{value:"",city:""},neighborhoodNames:[""], list:[],
action:"",
filterList:[],
currentValue:"",currentValuecity:"",
tags:"",
isInvisible:true
}
this.handleSubmit = this.handleSubmit.bind(this);
this.filterList=this.filterList.bind(this);
this.onChange = this.onChange.bind(this);
this.onChangeCity = this.onChangeCity.bind(this);
this.onClick = this.onClick.bind(this);
this.removeItem = this.removeItem.bind(this);
}
//to filter list
filterList(event,type){
if(type==='city'){
let newlist=[];
this.state.cityList.map((e)=>{
if(e.value.startsWith(event)){
newlist.push(e.value+","+e.region.value+","+e.region.country.value);
}
});
this.setState({ cityFilterList:newlist }, () => {
console.log(this.state.cityFilterList);
});
console.log(this.state.cityFilterList);
console.log(newlist);
this.setState({currentValuecity:event});
}
else{
let newlist=[];
this.state.list.map((e)=>{
if(e.value.startsWith(this.state.currentValue)&&this.state.currentValue!==''){
newlist.push(e.value+","+e.city.value+","+e.city.region.value+","+e.city.region.country.value);
}
});
this.setState({filterList:newlist});
console.log(this.state.filterList);
this.setState({currentValue:event});
}
}
//when a tag in a dropbox is clicked current value is the tags value
onClick(id){
let newValue=this.state.filterList[id];
this.setState({currentValue:newValue});
this.setState({isInvisible:true});
}
//to generate tags
//upon input change.
onChange(event){
this.filterList(event,'neighborhood');
}
onChangeCity(event){
this.filterList(event,'city');
}
//to remove item upon request.
removeItem(){
let path='/neighborhood';
axios.delete(
'http://localhost:8080/neighborhood/'+this.props.id);
window.location.reload(false);
}
async componentDidMount() {
let ofList=[];
await axios.get(
'http://localhost:8080/neighborhood')
.then(res => {
let newList=[]
newList=res.data;
newList.map(
(e)=>{
ofList.push({id:e.id,value:e.value,city:e.city});
}
);
}).then().catch(
function (error) {
console.log(error);
});
this.setState({list:ofList});
let fromList=[];
axios.get(
'http://localhost:8080/'+"city")
.then(res => {
let newList=res.data;
newList.map(
(e)=>{
fromList.push({id:e.id,value:e.value,region:e.region});
}
);
}).then().catch(
function (error) {
console.log(error);
});
this.setState({cityList:fromList});
if(this.props.id!==-1){
axios.get(
'http://localhost:8080/neighborhood/'+this.props.id)
.then(res => {
this.setState({neighborhood: res.data});
}).catch(
function (error) {
console.log(error);
});}
else{
let emptyItem={
value:"",city:this.props.city
}
this.setState({neighborhood:emptyItem});
}
console.log(this.state.neighborhood);
}
//upon entering the input button edit or save will be completed.
async handleSubmit(event) {
event.preventDefault();
let supraList=this.state.cityList;
let newNeighborhood=this.state.neighborhood;
for(let i=0;i<supraList.length;i++){
let values=this.state.currentValuecity.split(',');
if(supraList[i].value===this.state.currentValuecity.split(',')[0]&&supraList[i].region.value===this.state.currentValuecity.split(',')[1]&&supraList[i].region.country.value===this.state.currentValuecity.split(',')[2]){
newNeighborhood.city=supraList[i];
}
}
newNeighborhood.value=this.state.currentValue;
this.setState({neighborhood:newNeighborhood});
await axios.post(
'http://localhost:8080/neighborhood',this.state.neighborhood)
.then(res => {
this.setState({neighborhoodError: res.data});
}).catch(
function (error) {
console.log(error);
});
}
render()
{
if(this.state.neighborhood.city===null){
return( <div>
<div> city: <Autocomplete list={this.state.cityFilterList} onChangeValue={this.onChangeCity}/></div>
<form onSubmit={this.handleSubmit} >
<div><b>previous value:{this.state.neighborhood.value || ''}</b></div>
<label>neighborhood:</label>
<Autocomplete list={this.state.filterList} onChangeValue={this.onChange}/>
<div>{this.state.neighborhoodError}</div>
<input type="submit" value="Submit"></input>
</form>
<button onClick={this.removeItem}>
Delete
</button>
</div>);
}
return( <div>
<div> city: {this.state.neighborhood.city.name || ''}</div>
<form onSubmit={this.handleSubmit} >
<div><b>previous value:{this.state.neighborhood.value || ''}</b></div>
<label>neighborhood:</label>
<Autocomplete list={this.state.filterList} onChangeValue={this.onChange}/>
<div>{this.state.neighborhoodError}</div>
<input type="submit" value="Submit"></input>
</form>
<button onClick={this.removeItem}>
Delete
</button>
</div>);
}
}
// Exporting the component
export default Neighborhood;
my spring-boot classes
@JsonInclude(JsonInclude.Include.NON_NULL)
@JsonIdentityInfo(scope = Neighborhood.class,
generator = ObjectIdGenerators.PropertyGenerator.class,
property = "id")
@Getter
@Setter
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Entity
@Table(name = "neighborhood ")
public class Neighborhood implements Serializable {
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "value", nullable = false)
private String value;
//here idiot
@OneToMany(fetch=FetchType.LAZY, mappedBy="neighborhood")
private Set<Transaction> transactions;
//here idiot
@ManyToOne(fetch = FetchType.LAZY, optional = false)
@JoinColumn(name = "city_id")
private City city;
@OneToMany(fetch=FetchType.LAZY, mappedBy="employee")
private Set<EmployeeGeographicData> employeeGeographicDataSet;
}
@JsonInclude(JsonInclude.Include.NON_NULL)
@JsonIdentityInfo(generator= JSOGGenerator.class)
@Getter
@Setter
@Builder
@AllArgsConstructor
@NoArgsConstructor
@Entity
@Table(name = "city")
public class City implements Serializable{
private static final long serialVersionUID = 1L;
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Long id;
@Column(name = "value", nullable = false)
private String value;
@ManyToOne(fetch = FetchType.LAZY, optional = false)
@JoinColumn(name = "region_id")
private Region region;
@OneToMany(fetch=FetchType.LAZY, mappedBy="city")
private Set<Neighborhood> neighborhoods;
@OneToMany(fetch=FetchType.LAZY, mappedBy="employee")
private Set<EmployeeGeographicData> employeeGeographicDataSet;
}
let newList=res.data;
let newObject={};
let target="";
target = JSOG.stringify(res.data);
newObject= JSOG.parse(target);