需要帮助，使用VUE.JS JavaScript解析导入的json数据 [英] Need help parsing imported json data with VUE.JS JavaScript

问题描述

我需要导入JSON数据并从中提取特定内容，但在执行时遇到了麻烦.

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

这是示例数据:

{
   "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.

我这样导入数据:

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

推荐答案

1. 创建一个computed属性

使用 Object.values 返回一个数组 proposedCourses对象属性值

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

使用 Array.prototype.map 来获取name， 每个对象的description和professors属性.

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

计算出的属性将返回:

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

然后，使用v-for遍历computed属性.

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>

这篇关于需要帮助，使用VUE.JS JavaScript解析导入的json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！