Values in api come undefined - laravel

Question

i am making a GET api in Laravel the api in postman works great but when i use it in Laravel to fetch specific data they come undefined. This is the api.php route:
Route::get('list',[GetController::class,'getValues']);
This is the GetController :
function getValues()
{
return response()->json([ValuesResource::collection(Order::all())], 200);
}
This is the ValuesResource :
public function toArray($request)
{
return [
'order_number' => $this->order_number,
'client_id' => $this->client_id,
'description' => $this->description,
'client' => new ClientResource($this->client),
];
}
This is the ClientResource :
public function toArray($request)
{
return [
'name' => $this->name,
'age' => $this->age,
'salary' => $this->salary,
];
}
And this is the blade JQuery code :
async function getData() {
const apiUrl = "http://127.0.0.1:8000/api/list";
const response = await fetch(apiUrl)
const barChatData = await response.json()
console.log(barChatData);
const salary = barChatData.map((x) => x.salary)
//console.log(barChatData.map((x) => x.salary))
const age = barChatData.map((x) => x.age)
const name = barChatData.map((x) => x.name)
employeeSalaryData = salary
employeeAgeData = age
employeeLabel = name
}
In postman i get this result:
[
[
{
"order_number": "b7f55e7ce5",
"client_id": 1,
"description": "order1",
"client": {
"name": "Mr. Omari Schaefer DVM",
"age": "29",
"salary": "150"
}
}
]
]
While on browser they come undefined, if i do just
console.log(barChatData);
I get this array
[Array(1)]
0
:
Array(1)
0
:
{order_number: 'b7f55e7ce5', client_id: 1, description: 'order1', client: {…}}
length
:
1
So the values are coming but i cant fetch them with specific row.

Answer 1

Your code seems to be working fine but need a couple things to change as your fetched data is there.
there is array inside barChatData so map it like this:
const age = barChatData[0].map((item) => {
return item.client.age;
});
const name = barChatData[0].map((item) => {
return item.client.name;
});
const salary = barChatData[0].map((item) => {
return item.client.salary;
});