Get a property from a nested JSON with VueJS

[sorin21us]

I have a json with events that I get it with this.$http.get from the backend. I have to output in the page event name, description, … and polygons(witch are locations).

Here in these polygons I have the name of the location, witch I don’t know how to output it with binding in the page.

GET /event

{
  "errorCode": 0,
  "errorMessage": null,
  "events": [
    {
      "errorCode": 0,
      "errorMessage": null,
      "rid": "1",
      "eventName": "ev1",
      "description": "desc1",
      "startDate": 1503262800000,
      "endDate": 1503262800000,
      "ownerId": 1,
      "active": true,
      "deleted": false,
      "polygons": [
        {
          "errorCode": 0,
          "errorMessage": null,
          "rid": "1",
          "name": "loc1",
          "companyBranchId": 1,
          "filePath": "file1",
          "imagePath": "img1",
          "color": "col1",
          "active": true,
          "deleted": false,
          "links": []
        }
      ],
      "nrOfInvitees": 0,
      "ids": [],
      "visitors": [],
      "links": []
    },
    {
      "errorCode": 0,
      "errorMessage": null,
      "rid": "2",
      "eventName": "ev2",
      "description": "desc2",
      "startDate": 1503262800000,
      "endDate": 1503262800000,
      "ownerId": 1,
      "active": true,
      "deleted": false,
      "polygons": [
        {
          "errorCode": 0,
          "errorMessage": null,
          "rid": "2",
          "name": "loc2",
          "companyBranchId": 2,
          "filePath": "file2",
          "imagePath": "img2",
          "color": "col2",
          "active": true,
          "deleted": false,
          "links": []
        }
      ],
      "nrOfInvitees": 0,
      "ids": [],
      "visitors": [],
      "links": []
    },
  ]
}

Getting the event name, description or date was easy but when I try to output the polygons.name I don’t get anything in the page.

<div class="event-title">
  <span>{{event.eventName}}</span>
</div>
<div class="event-address">
  <span><i class="ti-location-pin"></i> {{event.polygons.name}}</span>
</div>

I get the data in this above Event.vue from Events.vue

<app-event v-for="event in events" :event="event" :key="event.rid"></app-event>

I tried to do in the child component:

{{JSON.stringify(event.polygons.name)}}

but I get only the first location name from the whole list, so in the page I get only one event displayed.

When I tried

{{event.polygons.length}}

the output was 1.

I know that in PHP is something like 2 for .. as .. && .. as .. .
in vuejs will be

<app-event v-for="event in events && polygon in event.poligons" :event="event" :key="event.rid"></app-event>

but doesn’t work.

Please, someone, can tell me how to get in the child page the polygons name?

[fretburner]

As long as it’s always the first polygon in the array that you want, you should be able to do this:

<span><i class="ti-location-pin"></i> {{event.polygons[0].name}}</span>

[sorin21us]

My friend I tried that and I get in the page only the first item from the polygons.
I tried even

<span v-for="polygon in event.polygons"><i class="ti-location-pin"></i> {{polygon.name}}</span>

and I got a lot errors. After fixing the errors I got the same: only one polygon name for the first event. For the rest of events the were no output where suppose to be <div class="event-address"></div>

[fretburner]

Yeah, I did say that method was only good for the first polygon in the array.

The code you’ve shown there should work. I’ve set up a demo here: https://codesandbox.io/s/p36jwry0rx

Can you take a look and see if that’s what you’re trying to do? If not, maybe you could fork the sandbox and change it so it matches what you’ve already got and we can take it from there.

[sorin21us]

This is very strange. At work didn’t work at all. I will look again on Monday and I will tell you what is going on.

https://codesandbox.io/s/xv3lxzjv0o

Thank you for you advice and patience :).