How to import a JSON inside Vue.js and html

Question

I'm new to Vue and not used to HTML

I'm trying to import information from a JSON into my interface, to present it to the user.

Here's the JSON style:

[
{
"Title": "SOFT-STARTER", 
"Cod": "Produto: 15775931", 
"Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores.", 
"Technical_characteristics": ["Corrente nominal", "600 A", "Tensão nominal", "4,16 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP41", "Certificação", "CE"]
},
{
"Title": "SOFT-STARTER SSW", 
"Cod": "Produto: 14223395", 
"Description": "A soft-starter SSW7000 permite o controle de partida/parada e proteção de motores de indução trifásicos de média tensão.", 
"Technical_characteristics": ["Corrente nominal", "125 A", "Tensão nominal", "6,9 kV", "Tensão auxiliar", "200-240 V", "Grau de proteção", "IP54/NEMA12", "Certificação", "CE"]
}
]

I saw several tutorials, but nothing worked. Here is the status of the current code. This code even runs, but it doesn't bring any data to the 'textarea' of the html. Here's code file EstepeJson.vue:

<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 "../components/DadosScrapingProdutos.js";

export default {
  name: "JsonArq",
  props: {
    msg: String,
  },
  data() {
    return {
      listDataString: '',
      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>

Code from Vue's main file, App.vue, follows:

<template>
  <div class="main-container">
    <h1 style="color:#0072c6;">Hello</h1>
    <p style="text-align:center; color:#0072c6;" >Bem Vindo ao Autocomplete para noticiais <br>
     Team, v-1.0<br>
    <Autocomplete />
    <br>
    <JsonArq />
    <img src="./components/logo.png" width=250 height=200 alt="Logo WEG" >
    </p>
  </div>
</template>

<script>
import Autocomplete from './components/Autocomplete.vue'
import JsonArq from './components/EstepeJSON.vue'
export default {
  name: 'App',
  components: {
    Autocomplete, 
    JsonArq
  }
}
</script>

<style>

  .main-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-family: 'Fredoka', sans-serif;
  }

  h1 {
    font-size: 3rem;
  }

  @import url('https://fonts.googleapis.com/css2?family=Fredoka&display=swap');
</style>

Abraham Felix · Accepted Answer · 2022-11-24 20:17:33Z

2

Here is a simplified solution:

1- Put your JSON data in a file called data.json in the src/ directory.

2- In the Vue component EstepeJson.vue inside the script tag import the JSON file:

import json from "@/data.json";

3- Then in that same file EstepeJson.vue add the data to a data property like this:

export default {
  name: "EstepeJson",
  data() {
    return {
      myJson: json,
    };
  },
};

4- In the same file EstepeJson.vue inside the html tag add this:

<template>
 <div v-for="data in myJson" :key="data.Cod">
    <p>{{ data.Title }}</p>
    <p>{{ data.Cod }}</p>
    <p>{{ data.Description }}</p>
    <p>{{ data.Technical_characteristics }}</p>
  </div>
 </template>

here is a live code example: https://codesandbox.io/embed/crazy-shadow-01ex0w?fontsize=14&hidenavigation=1&theme=dark

5- If you are trying to fetch the JSON data from an endpoint send me the URL and I will write the code for you using Axios, and send a sandbox example for you to explore.

edited Nov 24, 2022 at 20:17

answered Nov 24, 2022 at 19:55

Abraham Felix

1098 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

CH97 Over a year ago

It worked perfectly buddy. A doubt: what if instead of text it was a number, for example... instead of "title" is "1"?

Abraham Felix Over a year ago

For example, if the JSON file has the name of the object as "1": "SOFT-STARTER", you can access it like {{ data[1] }}, I updated the live code example with the solution.

CH97 Over a year ago

Guys, I'm going to share another solution here, in which the data is returned inside a table. Just one more excellent option besides the one Abraham helped me with. stackoverflow.com/questions/72967282/…

CH97 Over a year ago

Friend, a question: how would the code be when I don't have FastAPI or websocket.send_json() for Vue. FastAPI code is similar to this question: stackoverflow.com/questions/64101460/…

Collectives™ on Stack Overflow

How to import a JSON inside Vue.js and html

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related