Show json result with vue.js

Question

Hi i am try to show json file result with vue.js the target is that result will be showed on value.

this is my code:

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'
      }


    ],

score 45 · Answer 1 · answered Jan 22 '18 at 09:01

45

use this code:

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

and JS:

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);
    }
  }
})

answered Jan 22 '18 at 09:01

Behnam

6,244
1
39
36

Because my `value` was a Vue-wrapped object, I actually had to reverse the method order to call `JSON.parse` after calling `JSON.stringify` on the value like so: `JSON.parse(JSON.stringify(value, null, 2))` Suggested at https://stackoverflow.com/a/58098164/4531155 – RSmithlal Apr 16 '21 at 15:23

Caveman · Answer 2 · 2023-03-21T10:14:42.990

26

HTML and JS have this built into the language. Try...

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

This gives the default indent, to specify a custom indent provide it as the third argument to JSON.stringify(...).

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

If you're outside of Vue then using some combo of the above snippet will do.

edited Mar 21 '23 at 10:14

answered Sep 03 '20 at 13:37

Caveman

2,527
1
17
18

1
great answer! a bit cleaner: `
```
{{ JSON.stringify(yourObject, null, 2) }}
```
`
– Aryeh Beitz Nov 30 '20 at 16:01
1

@AryehBeitz I added to the answers how to specify the indentation :). – Caveman Dec 01 '20 at 13:00

score 20 · Answer 3 · answered Mar 30 '21 at 18:10

20

just use <pre>

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

answered Mar 30 '21 at 18:10

Balaji

9,657
5
47
47

Best answer, clean and simple – Aesir Jul 12 '21 at 18:34

score 1 · Answer 4 · edited Mar 05 '23 at 15:10

Here's one way to display JSON data, using Vue:

Display a stringified json object inside a <textarea> using v-model
Display object properties 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>

score 0 · Answer 5 · answered Apr 19 '19 at 19:30

If the /api is only on the dev server you can create a vue.config.js file in the app root folder.

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));
      });
    }
  }
}

With this files when I run npm run serve, I get the json object when navigating to /api and my regular app otherwise.

score 0 · Answer 6 · answered Jul 22 '21 at 16:41

0

Just use this:

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

answered Jul 22 '21 at 16:41

Richelly Italo

1,109
10
9

Show json result with vue.js

6 Answers6

Linked