Need help parsing imported json data with VUE.JS J

Question

I need to import JSON data and pull out specific things from it and am having trouble doing it.

This is the sample data:

{
   "0bEiO5zcBCHv3Wd2lxHjjRepB":{
      "name":"math",
      "credits":4,
      "professors":[
         "Samatha"
      ],
      "description":"come and learn some math",
      "prereqs":"",
      "comment":"",
      "maxEnrollment":100,
      "times":[
         {
            "day":2,
            "start":900,
            "end":1100
         },
         {
            "day":4,
            "start":900,
            "end":1100
         }
      ],
      "departments":[
         "mathematics"
      ],
      "submitted":true
   },
   "BsSbrbjTH5FyV7gWdPjeDPqpw":{
      "name":"biology",
      "credits":4,
      "professors":[
         "Reuven"
      ],
      "description":"learn about biology and stuff",
      "prereqs":"",
      "comment":"",
      "maxEnrollment":20,
      "times":[
         {
            "day":3,
            "start":900,
            "end":1100
         },
         {
            "day":4,
            "start":900,
            "end":1100
         }
      ],
      "departments":[
         "biology"
      ],
      "submitted":true
   }
}

I want to try and pull out the name, description, and professor for each one.

I import the data like so:

$.get( "/api/v1/demoschool_jacob/proposedCourses", function( data ) {
  app.proposedCourses = data;
})

Answer 1

you could use like

for(var prop in data) {
    var obj = {
        name: prop.name,
        description: prop.description,
        professor: prop.professor
    };
    console.log(obj); // U can use this obj object to applu your further logic
}

Answer 2

1. Create a computed property

2. Use Object.values to return an array of the proposedCourses object properties values

3. Use Array.prototype.map to get the name, description and professors properties of each object.

The computed property will return:

Object.values(this.proposedCourses).map(({ name, description, professors }) => ({ name, description, professors }))

---

After that, use v-for to iterate over the computed property.

Vue.config.productionTip = false
Vue.config.devtools = false

new Vue({
  el: '#app',
  data() {
    return {
      proposedCourses: {
        "0bEiO5zcBCHv3Wd2lxHjjRepB": {
          "name": "math",
          "credits": 4,
          "professors": [
            "Samatha"
          ],
          "description": "come and learn some math",
          "prereqs": "",
          "comment": "",
          "maxEnrollment": 100,
          "times": [{
              "day": 2,
              "start": 900,
              "end": 1100
            },
            {
              "day": 4,
              "start": 900,
              "end": 1100
            }
          ],
          "departments": [
            "mathematics"
          ],
          "submitted": true
        },
        "BsSbrbjTH5FyV7gWdPjeDPqpw": {
          "name": "biology",
          "credits": 4,
          "professors": [
            "Reuven"
          ],
          "description": "learn about biology and stuff",
          "prereqs": "",
          "comment": "",
          "maxEnrollment": 20,
          "times": [{
              "day": 3,
              "start": 900,
              "end": 1100
            },
            {
              "day": 4,
              "start": 900,
              "end": 1100
            }
          ],
          "departments": [
            "biology"
          ],
          "submitted": true
        }
      }
    }
  },

  computed: {
    courses() {
      return Object.values(this.proposedCourses).map(({
        name,
        description,
        professors
      }) => ({
        name,
        description,
        professors
      }))
    }
  }
})

<script src="https://vuejs.org/js/vue.js"></script>

<div id="app">
  <ul>
    <li v-for="{ name, description, professors } in courses" :key="name">
      <p>{{ name }}</p>
      <p>{{ description }}</p>
      <p>{{ professors }}</p>
    </li>
  </ul>
</div>