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

The package.json file is missing the "exports" main, causing the Error [ERR_PACKAGE_PATH_NOT_EXPORTED] to be displayed

Vue Router configuration functions properly when accessed through URL directly

Execute the jQuery function to submit the form via AJAX once the validation process has been

Using Vue/Nuxt, you can schedule the execution of a function on a specific page by employing either $nextTick or

I am curious about how to implement overflow:hidden along with position:sticky in React.js

Ways to address a buffered data problem in Websocket Rxjs. When trying to send a message, it is not being received by the server and instead is being stored in a

Generate list items based on a PHP array using JavaScript

Guide on uploading images to a NodeJS server from an Angular 2+ application

What is the best way to interpret a JSON with nested structure?

There are a total of 152 issues found in the index.tsx file within the react

Enhance the numerical value displayed in jQuery UI tooltips

Transforming a JSON file into a pandas dataframe

Expanding on the nested document in mongoose

What is the best way to display a template after submitting data via AJAX in the Flask framework?

"Exploring the differences between sending a JSON post request with multiple parameters to a Web

Loop through a nested array and output the playerId, playerName, and playerCategory for each player

Is it acceptable to designate the db instance as a global variable so that it is always accessible without requiring the "require" statement in Node.js?

Dropzone.js only allows one audio file and one image thumbnail file to be uploaded simultaneously

Is it possible to pass parameters in the .env file in Node.js?

Issue encountered when utilizing SwiftyJSON to parse JSON containing Unicode characters