Display JSON data using Vue.js

Question

Display JSON data using Vue.js

Trying to display JSON file results using Vue.js, with the goal of showing the result in a value.

Here is the code snippet:

data () {
  return {
    fetchData: function () {

      var self = this;
      self.$http.get("/api/casetotalactivation", function(data) {
        self.items = data;
      });
    },

    statsCards: [
      {
        type: 'warning',
        icon: 'ti-server',
        title: 'Cases',
        value: this.items,
        footerText: 'Updated now',
        footerIcon: 'ti-reload'
      }
    ],

javascript json vue.js

Answer 1

Answer №1

try out this code snippet:

<div id="vueapp">
  <textarea v-model="jsonstr" rows="8" cols="40"></textarea>
  <pre>{{ jsonstr | pretty }}</pre>
</div>

also, include the following JavaScript:

new Vue({
  el: '#vueapp',
  data: {
    jsonstr: '{"id":1,"name":"A green door","price":12.50,"tags":["home","green"]}'
  },
  filters: {
    pretty: function(value) {
      return JSON.stringify(JSON.parse(value), null, 2);
    }
  }
})

Answer 2

try out this code snippet:

<div id="vueapp">
  <textarea v-model="jsonstr" rows="8" cols="40"></textarea>
  <pre>{{ jsonstr | pretty }}</pre>
</div>

also, include the following JavaScript:

new Vue({
  el: '#vueapp',
  data: {
    jsonstr: '{"id":1,"name":"A green door","price":12.50,"tags":["home","green"]}'
  },
  filters: {
    pretty: function(value) {
      return JSON.stringify(JSON.parse(value), null, 2);
    }
  }
})

Answer 3

Answer №2

One of the convenient features in HTML and JS is their built-in capability. Experiment with...

<pre>{{ yourObject }}</pre>

The default indent can be obtained by simply using JSON.stringify(...). To specify a custom indent, include it as the third argument.

// change 2 to '\t' for tab indentation 
<pre>{{ JSON.stringify(yourObject, null, 2) }}</pre>

If you are not within Vue, combining JSON.stringify with <pre> will still function effectively.

Answer 4

One of the convenient features in HTML and JS is their built-in capability. Experiment with...

<pre>{{ yourObject }}</pre>

The default indent can be obtained by simply using JSON.stringify(...). To specify a custom indent, include it as the third argument.

// change 2 to '\t' for tab indentation 
<pre>{{ JSON.stringify(yourObject, null, 2) }}</pre>

If you are not within Vue, combining JSON.stringify with <pre> will still function effectively.

Answer 5

Answer №3

simply employ the <pre> tag

<pre>{{json}}</pre>

Answer 6

simply employ the <pre> tag

<pre>{{json}}</pre>

Answer 7

Answer №4

Here's a neat way to showcase JSON information using Vue.js:

Insert a stringified json object inside a <textarea> utilizing the v-model directive
Display object properties by iterating through them with <li v-for="">

<template>
  <div class="hello">
    <textarea v-model="listDataString" rows="20" cols="80"></textarea>
    <ul id="items">
      <li v-for="(item, index) in listData" :key="index">
        {{ `${item.text} [${item.id}]` }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "RenderList",
  props: {
    msg: String,
  },
  data() {
    return {
      listDataString: String,
      listData: [], // placeholder
    };
  },
  mounted() {
    axios
      .get("=== [API_ENDPOINT] ===")
      .then((response) => {
        this.listDataString = JSON.stringify(response.data, null, "\t");
        this.listData = response.data;
        console.log(this.listDataString);
        return response; // multiline arrow function must return
      });
  },
};
</script>

https://i.stack.imgur.com/oiJY5.jpg

Answer 8

Here's a neat way to showcase JSON information using Vue.js:

Insert a stringified json object inside a <textarea> utilizing the v-model directive
Display object properties by iterating through them with <li v-for="">

<template>
  <div class="hello">
    <textarea v-model="listDataString" rows="20" cols="80"></textarea>
    <ul id="items">
      <li v-for="(item, index) in listData" :key="index">
        {{ `${item.text} [${item.id}]` }}
      </li>
    </ul>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "RenderList",
  props: {
    msg: String,
  },
  data() {
    return {
      listDataString: String,
      listData: [], // placeholder
    };
  },
  mounted() {
    axios
      .get("=== [API_ENDPOINT] ===")
      .then((response) => {
        this.listDataString = JSON.stringify(response.data, null, "\t");
        this.listData = response.data;
        console.log(this.listDataString);
        return response; // multiline arrow function must return
      });
  },
};
</script>

https://i.stack.imgur.com/oiJY5.jpg

Answer 9

Answer №5

Incase the /api exists solely on the dev server, you have the option to create a vue.config.js file in the root directory of your app.

module.exports = {
  devServer: {
    before: function(app, server) {
      app.get('/api', function(req, res) {
        const result = [{
          type: 'warning',
          icon: 'ti-server',
          title: 'Cases',
          value: this.items,
          footerText: 'Updated now',
          footerIcon: 'ti-reload'}];
        res.writeHead(200, {'Content-Type': 'application/json'});
        res.end(JSON.stringify(result));
      });
    }
  }
}

After adding these files, running npm run serve will provide the json object upon navigating to /api, while accessing the regular app content elsewhere.

Answer 10

Incase the /api exists solely on the dev server, you have the option to create a vue.config.js file in the root directory of your app.

module.exports = {
  devServer: {
    before: function(app, server) {
      app.get('/api', function(req, res) {
        const result = [{
          type: 'warning',
          icon: 'ti-server',
          title: 'Cases',
          value: this.items,
          footerText: 'Updated now',
          footerIcon: 'ti-reload'}];
        res.writeHead(200, {'Content-Type': 'application/json'});
        res.end(JSON.stringify(result));
      });
    }
  }
}

After adding these files, running npm run serve will provide the json object upon navigating to /api, while accessing the regular app content elsewhere.

Answer 11

Answer №6

Here's a simple solution:

<pre v-html="JSON.stringify(data, null, 2)"></pre>

Answer 12

Here's a simple solution:

<pre v-html="JSON.stringify(data, null, 2)"></pre>

Answer 13

Answer №7

Make sure to explore the benefits of using computed properties

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <title>Display JSON Data with Vue.js</title>
</head>
<body>

<div id="app">
  <!-- Input field for updating the name -->
  <div>
    <label for="nameInput">Change Your Name: </label>
    <input id="nameInput" v-model="myObject.name">
  </div>

  <!-- Display the formatted JSON data -->
  <pre>{{ formattedJSON }}</pre>
</div>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e585b4b6e1d001e001b">[email protected]</a>/dist/vue.global.js"></script>

<script>
const appData = {
  data() {
    return {
      myObject: {
        name: "John",
        age: 30,
        city: "New York"
      }
    };
  },
  computed: {
    formattedJSON() {
      return JSON.stringify(this.myObject, null, 2);
    }
  }
};

Vue.createApp(appData).mount("#app");
</script>

</body>
</html>

Answer 14

Make sure to explore the benefits of using computed properties

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0>
  <title>Display JSON Data with Vue.js</title>
</head>
<body>

<div id="app">
  <!-- Input field for updating the name -->
  <div>
    <label for="nameInput">Change Your Name: </label>
    <input id="nameInput" v-model="myObject.name">
  </div>

  <!-- Display the formatted JSON data -->
  <pre>{{ formattedJSON }}</pre>
</div>

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e585b4b6e1d001e001b">[email protected]</a>/dist/vue.global.js"></script>

<script>
const appData = {
  data() {
    return {
      myObject: {
        name: "John",
        age: 30,
        city: "New York"
      }
    };
  },
  computed: {
    formattedJSON() {
      return JSON.stringify(this.myObject, null, 2);
    }
  }
};

Vue.createApp(appData).mount("#app");
</script>

</body>
</html>

Display JSON data using Vue.js

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Is there a way to transform this JSON string into a particular format?

How to eliminate an element from numerous arrays using jQuery?

Ways to display fresh information on webpage following data preservation in AngularJS

When working with Typescript and Vue.js, it's important to ensure that properties are initialized before

Interacting with nested arrays and objects in JSON.net

Troubleshooting issue with AngularJS ng-repeat not functioning properly when using Object key value filter with ng-model

What is the method for selecting the "save as" option while downloading a file?

What is the best way to extract a single parameter from each element of a .json array using Python filtering?

Is there a way in JavaScript or jQuery to display text from an array and switch to the next piece of text in the array with the click of a button?

When attempting to load a page in Mozilla, the initial DIV code fails to load

What is the best way to send a continuous stream of data in Express?

Utilizing variable values in HTML and CSS to enhance a website's functionality

Is it possible to create a single button that, upon clicking, fades in one image while simultaneously fading out another?

Navigate through the JSON dataset

Extract a property from a JSON object

The CORS policy has blocked access to the address due to security reasons

Ways to apply the .not selector efficiently in jQuery

Store the image URL in cache during AJAX loading

Using AngularJS to pass the output of a unique filter to another custom filter

Transforming rows into a JSON key/value pair in PostgreSQL is an effective way to organize