CODEWITHSUNDEEP
javascripthtmljsonvue.jsvuejs3
CH97
CH97

Reputation: 75

How to import a JSON inside Vue.js and html

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>

Upvotes: 0

Views: 2553

Answers (1)

Abraham Felix
Abraham Felix

Reputation: 109

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.

Upvotes: 2

Related Questions