Exploring VueJS: How to retrieve a specific value from an array within JSON data obtained from an API request?

Question

Exploring VueJS: How to retrieve a specific value from an array within JSON data obtained from an API request?

Currently, I am creating a blog completely from scratch with both front and backend components that communicate through an API I developed. Below is the JSON output of the API:

{
    "status": true,
    "posts": [
        {
            "id": 2,
            "title": "a la zeub",
            "description": "zebi",
            "user_id": 1,
            "created_at": "2022-12-08T12:16:58.000000Z",
            "updated_at": "2022-12-08T12:16:58.000000Z"
        },
        {
            "id": 4,
            "title": "title2",
            "description": "thing",
            "user_id": 1,
            "created_at": "2022-12-08T12:39:15.000000Z",
            "updated_at": "2022-12-08T12:39:15.000000Z"
         }
    ]
}

For my frontend, I utilize VueJS. When I need to display a specific value from the API response, I use the following syntax in the HTML section:

<p> {{ the name of the variable }} </p>

However, I am facing an issue where if I attempt to display posts.status using this method, it correctly shows "true" in the p tag. Yet, when trying something like posts.posts.id or posts.posts['id'], it does not work as expected. The p tag remains empty in the source code. What should I input within the brackets to access the title?

javascript json vue.js

Answer 1

Answer №1

Agree with @LawrenceCherone and following up on the comments, it is important to implement something along these lines-

To illustrate, let's take a variable posts within the data property and assign your JSON result to it.

<html>
<div id="app">
  <p v-for="(post, index) in posts.posts" :key="index">{{ post.title }}</p>
</div>

<!-- Make sure to add Vue from CDN! -->
<script src="https://unpkg.com/vue@2"></script>
<script>
  new Vue({
    el: '#app', //Instructs Vue to render in HTML element with id "app"
    data() {
      return {
        posts: {
         status: true,
         posts: [
          {
            "id": 2,
            "title": "a la zeub",
            "description": "zebi",
            "user_id": 1,
            "created_at": "2022-12-08T12:16:58.000000Z",
            "updated_at": "2022-12-08T12:16:58.000000Z"
           },
           {
            "id": 4,
            "title": "title2",
            "description": "thing",
            "user_id": 1,
            "created_at": "2022-12-08T12:39:15.000000Z",
            "updated_at": "2022-12-08T12:39:15.000000Z"
            }
         ]
        }
      }
    }
  });
</script>
</html>

Answer 2

Agree with @LawrenceCherone and following up on the comments, it is important to implement something along these lines-

To illustrate, let's take a variable posts within the data property and assign your JSON result to it.

<html>
<div id="app">
  <p v-for="(post, index) in posts.posts" :key="index">{{ post.title }}</p>
</div>

<!-- Make sure to add Vue from CDN! -->
<script src="https://unpkg.com/vue@2"></script>
<script>
  new Vue({
    el: '#app', //Instructs Vue to render in HTML element with id "app"
    data() {
      return {
        posts: {
         status: true,
         posts: [
          {
            "id": 2,
            "title": "a la zeub",
            "description": "zebi",
            "user_id": 1,
            "created_at": "2022-12-08T12:16:58.000000Z",
            "updated_at": "2022-12-08T12:16:58.000000Z"
           },
           {
            "id": 4,
            "title": "title2",
            "description": "thing",
            "user_id": 1,
            "created_at": "2022-12-08T12:39:15.000000Z",
            "updated_at": "2022-12-08T12:39:15.000000Z"
            }
         ]
        }
      }
    }
  });
</script>
</html>

Exploring VueJS: How to retrieve a specific value from an array within JSON data obtained from an API request?

Answer №1

Similar questions

CSS Attribute Selector Wildcard Capture Tool

VueJS component experiencing stagnant DOM updates

What methods can be used to test the functionality of bootstrap-vue toasts?

"Extracting regular expressions between the penultimate and ultimate characters

Using Jquery to Iterate Over Data

The dominance of the parent component's scoped style over the child component's scoped style

CKEditor directive in AngularJS does not properly enforce the maxlength attribute in textarea

Looking for assistance with implementing a jQuery function for an onClick event on

"Learn the steps to toggle a sub menu using an onclick event and how to hide it using another

Protecting a NodeJS Backend Application with Secure POST Request Handling

Having trouble navigating through multiple layers of nested array data in react js

JavaScript / Ajax / PHP - A Minor Bug That's Bugging Me

Visualizing Data with d3.js Force Chart: Integrating Images with Nodes for Dynamic Animation

Ways to retrieve output from a JavaScript function

Retrieve the inner content of parentheses within a string, utilizing recursion for nested parentheses

Slow loading time when switching between items in the drop-down menu from the Main Menu

Updating a Vuetify 3 Theme on the Fly

Combining text output using JavaScript, HTML, and Vue

Struggling to determine if the checkbox has been ticked?

Tips for making multiple successful calls to Firebase