getting data from an api - can't get item.title on it's own

So I am getting my data form my API but I can't actually get the individual key values from the object

html

<pre>{{ items }}</pre>
    <ul>
      <li class="bg-red-500" v-for="item in items[0]" :key="item.id">
        {{ item.title }}
        {{ item }}
      </li>
    </ul>

method:

getItems() {
      this.isloading = true;
      console.log("token: ", this.token);
      const headers = {
        Authorization: `Bearer ${this.token}`,
        "Content-Type": "application/json",
      };
      axios
        .get("http://laravel-jwt.test/api/items", { headers })
        .then((response) => {
          console.log("response of items: ", response.data.items[0]);
          this.items.push(response.data.items[0]);
          console.log("Items:", this.items[0]);
        });
    },

getItems is being called in the login method - not sure this is best practise

output:

Items
[
  {
    "id": 1,
    "title": "This is an item",
    "description": "This is the items description",
    "imageUrl": "image.png",
    "latitude": "-10,675675",
    "longitude": "32,678567",
    "status": "Found",
    "town": "Worthing",
    "category": "Toy",
    "created_at": "2022-09-16T09:28:11.000000Z",
    "updated_at": "2022-09-16T09:28:11.000000Z"
  }
]
1
This is an item
This is the items description
image.png
-10,675675
32,678567
Found
Worthing
Toy
2022-09-16T09:28:11.000000Z
2022-09-16T09:28:11.000000Z

bobbybouwmann

3 years ago

Level 88

This doesn't work before you use item in items[0]. Because of that item is now the value of each field in the array. Instead you need to do this

<ul>
    <li class="bg-red-500" v-for="item in items" :key="item.id">
        {{ item.title }}
    </li>
</ul>

boyjarv

3 years ago

Level 7

no, that didn't work, I have done it like this... looks a bit messy?!

getItems() {
      this.isloading = true;
      console.log("token: ", this.token);
      const headers = {
        Authorization: `Bearer ${this.token}`,
        "Content-Type": "application/json",
      };
      axios
        .get("http://laravel-jwt.test/api/items", { headers })
        .then((response) => {
          //   this.items.push(response.data.items[0]);
          this.formatItems(response.data);
        });
    },
    formatItems(items) {
      for (let key in items) {
        this.itemsList.push({ ...items[key], id: key });
      }
      console.log("Items:", this.itemsList);
    },

html

<ul>
      <li class="bg-red-500" v-for="item in itemsList" :key="item.id">
        {{ item[0].title }}
        {{ item[0].description }}
      </li>
    </ul>

bobbybouwmann

3 years ago

Level 88

The server already returns an array with all the keys. No need to loop over them and push them again to an array. You can simply do this

this.itemsList = response.data

After that, you should be able to loop over all the items and get the data

 <li class="bg-red-500" v-for="item in itemsList" :key="item.id">
    {{ item.title }}
</li>

Please or to participate in this conversation.