Vue CLI - Parsing nested data in component from local JSON

debugcn 投稿 Dev

Ajaya Bajracharya

I want to render the following view from JSON with a Vue component:

JSON:

{
  "0": {
    "title": "Title0",
    "content": {
      "0": {
        "text": "few text here",
        "image": false
      }
    }
  },
  "1": {
    "title": "Title1",
    "content": {
      "0": {
        "text": "few text here",
        "image": false
      },
      "1": {
        "text": "few text here",
        "image": true,
        "imagePath": "../../Assets/images.sample.png"
      }
    }
  }
}

And to parse that data I have written the following Vue component:

<template>
  <div>
    <section v-for="(data, index) in jsonTitle" :key="index">
      <h5>{{data.title}}</h5>
      <article v-for="(data, index) in jsonTitle" :key="index">
        <h6>{{data.content[0].text}}</h6>
        <img v-if="data.content[0].image === true" v-bind:src="data.imagepath" alt="">
      </article>
    </section>
  </div>
</template>
<script>
  import json from "@/components/json/english.json";
  export default {
    name: "databox",
    data() {
      return {
        jsonTitle: json
      };
    }
  };
</script>

I am definitely missing something in this code. I only get the 1st data of the second title. Please provide a Vue CLI solution rather than Vue.js, as I am new and don't possess much knowledge yet.

Dan

First, any time you have a list of data in your JSON, use an array instead of an object with numbered indexes. For example:

const json = [
  {
    "title": "Title0",
    "content": [
      {
        "text": "few text here",
        "image": false
      }
    ]
  }
]
...

I changed the name jsonTitle to profiles, imagining that this is some profile data. It makes the template clearer to study, since you have two loops. Each loop has its own index used as a key. Here is how your component should look:

<template>
  <div>
    <section v-for="(profile, indexProfile) in profiles" :key="indexProfile">
      <h5>{{ profile.title }}</h5>
      <article v-for="(content, indexContent) in profile.content" :key="indexContent">
        <h6>{{ content.text }}</h6>
        <img v-if="content.image === true" :src="content.imagePath" alt="">
      </article>
    </section>
  </div>
</template>

<script>
import json from "@/components/json/english.json";
export default {
  name: "databox",
  data() {
    return {
      profiles: json
    };
  }
};
</script>

There was also a typo with imagepath instead of imagePath. Here is a demo

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集2021-06-12

コメントを追加

サインイン

分類Dev

Related 関連記事

記事

Vue CLI - Parsing nested data in component from local JSON

Vue CLI - Parsing nested data in component from local JSON

Get nested data from local JSON file

Parsing Nested Arrays Data

Vue JS: Accessing data from different component

Golang - parsing nested json values

Updating Functional Component Local State Using Data From Redux State

Parsing JSON data from CLOB field using PL/SQL

Get data from Firebase in Vue.js component

Table not showing the data from database in laravel vue component

filter data from nested array in vue.js

Golang find a value from a map of nested json data from MongoDB

how can I reference a method from the same component in the data of the component vue js

Error in parsing nested JSON list in flutter

Nested JSON Object Parsing in android using volley

Include local CSS files in a single vue component

parsing json data into listview in ListFragment

How to display data from a local JSON file by clicking the button?

Vue upload local json file

Extracting data from very nested JSON in Azure SQL

Accessing nested values in JSON data from Twitch API

Pass data to nested component in react.js

How to integrate Tailwindcss into a VUE CLI 3 project's web component?

How to check an specific user detail component using the user ID with vue-router from json file?

JSON parsing an array from PHP filled with SQL data returns [object Object]

vue.js - recursive components doesn't get updated when using nested array from raw json

Vue CLI dynamic import from project module

Get access to data of component from another component

parse json in a vue-treeselect component

android parsing json data using ION

Parsing JSON data using variables as keys