CODEWITHSUNDEEP
jsonvue.jsvuejs2vue-componentvue-router
Daniel Sixl
Daniel Sixl

Reputation: 2499

Navigate through nested JSON-Data on click

Situation

I have complex JSON-data that I want to filter and rearrange. My data is a deeply nested collection of projects. Each project has task_lists, which contain tasks.

So the structure of my JSON-tree is roughly like this: projects → task_lists → tasks

Result I'd like to achieve

My goal is to view a grid of cards for each project. If I click on a button in project-card I want to change view and show the tasklists of the chosen project and a back-button. If I click on a tasklist, I want to change view and show the tasks of the chosen tasklist and a back-button. If I click on the task, I want to show a detail view of the card and a back-button.

Code sample

As the JSON is very big and not very readable it is hard to provide a code sample here on StackOverflow. I prepared a CodeSandbox to better describe how my data looks like. The projects are imported via the file projects.json for the sake of simplicity.

What I tried so far

I created nested components, but didn't manage to traverse the JSON tree up and down. Then I tried to integrate a vue router, but didn't know how to wire data to the routes.

Question

What would be a best practice approach for this situation?

Upvotes: 0

Views: 142

Answers (1)

Owl
Owl

Reputation: 6853

First create vue-router with 3 pages, first for your home page that shows your project list, and 2nd page for the project page, and 3rd will be your TaskLists page

const routes = [
  {
    name: "home",
    path: "/",
    component: () => import("./pages/Home.vue")
  },
  {
    name: "project",
    path: "/project/:projectId",
    component: () => import("./pages/Project.vue"),
    props: true
  },
  {
    name: "taskLists",
    path: "/project/:projectId/tasks",
    component: () => import("./pages/TaskLists.vue"),
    props: true
  }
];

So your App.vue will only contain <router-view>, and your main page will be moved to Home.vue.

Then add on Project.vue component to push to project page when you click View project, you also need to send the projectId as parameter

showProject(id) {
      this.$router.push({
        name: "project",
        params: {
          projectId: this.project.id
        }
      });
    }

Add Project page that get the projectId from parameter, and find the data from JSON, I used computed property for this

  props: ["projectId"],
  computed: {
    project() {
      return projectsData.find(p => p.id === parseInt(this.projectId, 10));
    }
  },

Add TaskLists page which works similarly with Project page, but you just showing the Task Lists.

  props: ["projectId"],
  computed: {
    taskLists() {
      return projectsData.find(p => p.id === parseInt(this.projectId, 10))
        .task_lists.data;
    }
  },

For the go back button, simply use router-link, where if you press Go Back button on Project page, it will go back to Home page:

<router-link :to="{name:'home'}">Go back</router-link>

And if you press Go Back button on TaskLists page, it will go back to Project page and pass projectId as the parameter:

<router-link :to="{name:'project', params: {projectId}}">Go back</router-link>

Full working example: https://codesandbox.io/s/how-to-navigate-through-nested-json-forked-fd27x

Upvotes: 1

Related Questions