I am having problem that I cannot solve. I need to print out response objects with javascript and I don't know how to do that. I have response like.this:

{
  "@context": "/contexts/Client",
  "@id": "/clients",
  "@type": "hydra:Collection",
  "hydra:member": [
    {
      "@id": "/clients/1",
      "@type": "Client",
      "uuid": "e3rer445",
      "number": " 0483",
      "name": "Tom Beringer",
      "adresses": [
      {
          "@id": "/client_addresses/1",
          "@type": "",
          "address": {
              "@id": "/addresses/1",
              "@type": "",
              "address": "Postbus 1d425"
          }
      },
  ]
},

And now I need to print out the result of all client details, so when I do this:

axios.get('/clients')
      .then(res => {
      this.users = res.data['hydra:member']
  })

I successfully print out the name, number, but when I try to print out addresses i get.this as a result:

<td><span>[
  {
    "@id": "/client_addresses/3",
    "@type": "",
        "address": {
        "@id": "/addresses/3",
        "@type": "",
        "address": "niet meer gebruiken"
     }
  } 
</span></td>

But what I need is just.this address: niet meer gebruiken Is it possible to do that?

I am having problem that I cannot solve. I need to print out response objects with javascript and I don't know how to do that. I have response like.this:

{
  "@context": "/contexts/Client",
  "@id": "/clients",
  "@type": "hydra:Collection",
  "hydra:member": [
    {
      "@id": "/clients/1",
      "@type": "Client",
      "uuid": "e3rer445",
      "number": " 0483",
      "name": "Tom Beringer",
      "adresses": [
      {
          "@id": "/client_addresses/1",
          "@type": "http://schema/Thing",
          "address": {
              "@id": "/addresses/1",
              "@type": "http://schema/Thing",
              "address": "Postbus 1d425"
          }
      },
  ]
},

And now I need to print out the result of all client details, so when I do this:

axios.get('/clients')
      .then(res => {
      this.users = res.data['hydra:member']
  })

I successfully print out the name, number, but when I try to print out addresses i get.this as a result:

<td><span>[
  {
    "@id": "/client_addresses/3",
    "@type": "http://schema/Thing",
        "address": {
        "@id": "/addresses/3",
        "@type": "http://schema/Thing",
        "address": "niet meer gebruiken"
     }
  } 
</span></td>

But what I need is just.this address: niet meer gebruiken Is it possible to do that?

• javascript

• Why not use github./api-platform/api-doc-parser to parse the Hydra API documentation? – numediaweb Commented Nov 19, 2020 at 9:28

4 Answers 4

Yes, It is possible.

Try with this:

res.data['hydra:member'][0]['adresses'][0]['address']['address']

or

res.data['hydra:member'][0]['adresses'][0].address.address

That will work fine if you only have one address object nested. In case you have more objects inside you should iterate over the array of addresses.

This will be/contain your array of addresses:

 res.data['hydra:member'][0]['adresses']

In addition to Jonathan's answer, here's some explanation.

You don't have to create a default config, but make sure when making a request to the api generated by Api platform, to add an 'Accept' header. The default seems to be 'application/ld+json'.

Adding 'Accept': 'application/json' to your headers will make sure you only get your objects without all the extra tags Api platform adds.

Just add a config default.

./main.js

axios.defaults.headers.mon['Accept'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';
axios.defaults.headers.get['Content-Type'] = 'application/json';
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.delete['Content-Type'] = 'application/json';
Vue.prototype.$http = axios;

Have you tried accessing the property like this?

res.data['hydra:member']['addresses][0]['address']['address']

If there is more than one address object nested within your addresses array, you might need to iterate over it.