Vue.js user filter of API data not working - Uncaught SyntaxError: Unexpected token :

Question

I am new to Vue.js and I am stuck. I have pulled in API data from Github jobs via Vanilla JavaScript and now I want to create a user filter. I am starting out with a filter for job "type" meaning Full time, part time, etc. Also, this code in being put into a plugin in WordPress called Shortcoder. I have watched tutorials and looked at three other posts on Stackoverflow that are similar but cannot figure out why I am getting this error: "unexpected SyntaxError:Unexpected token: on the line that states selectedType="Full Time". Maybe I have just stared at it for too long and need a fresh set eyes. I would really appreciate someone else reviewing it. Thanks in advance. Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- VUE.JS CDN -->
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>  

  <title>Github Jobs API</title>

 <a href="http://href="https://fonts.googleapis.com/css?family=Dosis:400,700" rel="stylesheet""></a>

  <style>
* {
  box-sizing: border-box
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: 'Dosis', sans-serif;
  line-height: 1.6;
  color: #696969;
  background: white;
}

#root {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  padding: 1.5rem 2.5rem;
  background-color: #b0bac6;
  margin: 0 0 2rem 0;
  font-size: 1.5rem;
  color: #696969;
}

p {
  padding: 0 2.5rem 2.5rem;
  margin: 0;
}

.container1{
  display: flex;
  flex-wrap: wrap;
}

.card {
  margin: 1rem;
  background: #bobac6;
  box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
  border-radius: 12px;
  overflow: hidden;
  transition: all .2s linear;
}

.card:hover {
  box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
  transform: translate3D(0, -2px, 0);
}

@media screen and (min-width: 600px) {
  .card {
    flex: 1 1 calc(50% - 2rem);
  }
}

@media screen and (min-width: 900px) {
  .card {
    flex: 1 1 calc(33% - 2rem);
  }
}

.card:nth-child(2n) h1 {
  background-color: #b0bac6;
  color: #696969;
}

.card:nth-child(4n) h1 {
  background-color: #b0bac6;
  color: #696969;
}

.card:nth-child(5n) h1 {
  background-color #b0bac6;
  color: #696969;
}
.container2 {
    padding: 20px;
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
}

label {
    display: block;
    line-height: 1.5em;
}

ul {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
}

li {
    padding: 8px 16px;
    border-bottom: 1px solid #eee;
}

  </style>

</head>

<body>
 <!-- DIV for Vue.js filter -->

     <div class="container2" id="jobs">
    <div class="filter">
        <label><input type="radio" v-model="selectedType" value="Full Time"/>Full Time</label>
        <label><input type="radio" v-model="selectedType" value="Part Time"/>Part Time</label>

    </div>

    <ul class="job-list">
        <li v-for="job in filteredJobs">{{ job.title }}</li>
    </ul>
</div>

   <!-- DIV FOR API DATA CARD DISPLAY -->
     <div id="root"></div>



      <script>
      // USED STRICT MODE TO SOLVE: “UNCAUGHT SYNTAX ERROR: UNEXPECTED TOKEN 
          U IN JSON @ POSITION 0”

      'use strict';

      // INITIATING APIDATA AS GLOBAL VARIABLE
       var apiData= " ";

       const app = document.getElementById('root');

       const container1 = document.createElement('div');
       container1.setAttribute('class', 'container1');

       app.appendChild(container1);

       var request = new XMLHttpRequest();

       //GET REQUEST WITH USE OF HEROKU AS A PROXY TO SOLVE CORS ERROR
       request.open('GET','https://cors-anywhere.herokuapp.com/https://jobs.github.com/positions.json?&markdown=true&page=1', 
                   true);
       request.onload = function () {

      //CONVERT JSON DATA TO JAVASCRIPT OBJECTS USING JSON.PARSE
      var apiData = JSON.parse(this.response);
      if (request.status >= 200 && request.status < 400) {
      apiData.forEach(job => {
      const card = document.createElement('div');
      card.setAttribute('class', 'card');

      const h1 = document.createElement('h1');
      h1.textContent = job.title;

      const p = document.createElement('p');
      job.description = job.description.substring(0, 300);
      p.textContent = `${job.description}...`;

      container1.appendChild(card);
      card.appendChild(h1);
      card.appendChild(p);
    });

      // ERROR HANDLING
       } else {
       const errorMessage = document.createElement('marquee');
       errorMessage.textContent = `It's not working!`;
      app.appendChild(errorMessage);
     }
   }
      request.send();

   // APPLY FILTER TO API DATA USING VUE.JS
    var vm = new Vue({
    el:  "#jobs",
    data() { 
      return {
          apiData:[],
          search: ' ',
          filterJobs: [ ]},

          selectedType:"Full Time"

           },

        computed: {
        filteredJobs: function() {
            vm = this;
            var category = vm.selectedType;

            if(type === "part time") {
                return vm.jobs;
            } else {
                return vm.jobs.filter(function(job) {
                    return job.type === type;
                });
            }
                   }
                 }
         });
     </script>
   </body>
</html>

Answer 1

The syntax errors are in data() :

data() { 
  return {
    apiData: [],
    search: ' ',
    filterJobs: []},  // <-- FIXME: unexpected '}'

    selectedType: "Full Time"
  // <-- FIXME: missing '}' for the return statement
},
computed: {
  ...

Here's the code corrected:

data() { 
  return {
    apiData: [],
    search: ' ',
    filterJobs: [], // <-- fixed

    selectedType: "Full Time"
  } // <-- fixed
},
computed: {
  ...

 var vm = new Vue({ el: "#jobs", data() { return { apiData: [], search: " ", jobs: [], selectedType: "full time" }; }, computed: { filteredJobs: function() { vm = this; var type = vm.selectedType; if (type === "part time") { return vm.jobs; } else { return vm.jobs.filter(function(job) { return job.type === type; }); } } }, mounted() { this.jobs = [ {id: 1, type: 'part time'}, {id: 2, type: 'full time'}, {id: 3, type: 'part time'}, {id: 4, type: 'full time'}, {id: 5, type: 'part time'}, ] } });

 <script src="https://unpkg.com/vue@2.6.1/dist/vue.min.js"></script> <div id="jobs"> <ul> <li v-for="job in filteredJobs" :key="job.id"> type: {{job.type}} </li> </ul> </div>

Vue.js user filter of API data not working - Uncaught SyntaxError: Unexpected token :

Question

1 answers

solution1
0 2019-02-05 23:23:51

Vue.js user filter of API data not working - Uncaught SyntaxError: Unexpected token :

Question

1 answers

solution1 0 2019-02-05 23:23:51

solution1
0 2019-02-05 23:23:51