Click here to Skip to main content
15,867,568 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:
I created vue pages to show data from my json file. I'm now having trouble with getting the data to show on my page.

In my mainContainerContent I put this:
HTML
<p>{{ skill.frontend.name }} </p>
inside my p element and I expect this result: (https://i.stack.imgur.com/a7x0o.png). But I'm not getting any data back.


When I change it to this:
HTML
<p>{{ skill.name }} </p>
I will get this result: (https://i.stack.imgur.com/YB4Bq.png) but I'm still not getting the data from my json file Im expecting to get.


mainContainer.vue:
HTML
<template>
  <Skills v-for="skill in skills.skills" :skill="skill" :key="skill.id"/>
</template>

<script setup>
  import Skills from './mainContainerSkills.vue';

  import skills from "../Skills.json";
</script>

<script>
export default {
  props: {
    skills: {
      default: null,
      type: Object,
    }
  }
}
</script>


mainContainerSkills.vue:
HTML
<template>
  <div>
    <!-- Frontend -->
    <div>
      <h3>
        Frontend
      </h3>
      <p>{{ skill.frontend.name }} </p>
    </div>

    <!-- Backend -->
    <div>
      <h3>
        Backend
      </h3>
      <p>{{ skill.backend.name }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    skill: {
      default: null,
      type: Object,
    }
  }
}
</script>


Skills.json:
HTML
{
  "skills": [
    {
      "name": "skills",
      "frontend": [
        {
          "id": "1",
          "name": "Vue",
          "icon": "Vue"
        },
        {
          "id": "2",
          "name": "HTML",
          "icon": "HTML"
        },
        {
          "id": "3",
          "name": "Javascript",
          "icon": "Javascript"
        },
        {
          "id": "4",
          "name": "Tailwind",
          "icon": "Tailwind"
        },
        {
          "id": "5",
          "name": "Bootstrap",
          "icon": "Bootstrap"
        }
      ],
      "backend": [
        {
          "id": "1",
          "name": "Laravel",
          "icon": "Laravel"
        },
        {
          "id": "2",
          "name": "PHP",
          "icon": "PHP"
        }
      ]
    }
  ]
}


What I have tried:

How could I solve this problem so that I can show the data from the frontend and backend object?
Posted
Updated 24-Apr-23 5:52am

1 solution

You have a couple of things suspicious in this code. First of all, it's your JSON structure. Your skills field is an array that consists of a single object. I assume you'd want to have just an object instead.
{
  "skills": {
      "name": "skills",
      "frontend": [
        {
          "id": "1",
          "name": "Vue",
          "icon": "Vue"
        },
        {
          "id": "2",
          "name": "HTML",
          "icon": "HTML"
        },
        {
          "id": "3",
          "name": "Javascript",
          "icon": "Javascript"
        },
        {
          "id": "4",
          "name": "Tailwind",
          "icon": "Tailwind"
        },
        {
          "id": "5",
          "name": "Bootstrap",
          "icon": "Bootstrap"
        }
      ],
      "backend": [
        {
          "id": "1",
          "name": "Laravel",
          "icon": "Laravel"
        },
        {
          "id": "2",
          "name": "PHP",
          "icon": "PHP"
        }
      ]
    }
}

Secondly, you try to access frontend.name as if it was and object but instead it's an array of frontend skills. So what you need is to iterate both arrays of skills separately. Your main component will look as
<template>
  <div>
      <h3>
        Frontend
      </h3>
      <Skills v-for="skill in skills.skills.frontend" :skill="skill" :key="skill.id"/>
  </div>
  <div>
      <h3>
        Backend
      </h3>
      <Skills v-for="skill in skills.skills.backend" :skill="skill" :key="skill.id"/>
  </div>
</template>

While your skill template will look like
<template>
  <div>
    <div>
      <p>{{ skill.name }} </p>
    </div>
  </div>
</template>
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month


CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900