Json File

[

{

"student_id": 101,

"first_name": "James",

"last_name": "Butler",

"address": "6649 N Blue Gum St",

"city": "New Orleans",

"state": "LA",

"zip": 70116,

"donor": false

},

{

"student_id": 102,

"first_name": "Josephine",

"last_name": "Darakjy",

"address": "4 B Blue Ridge Blvd",

"city": "Brighton",

"state": "MI",

"zip": 48116,

"donor": true

},

{

"student_id": 103,

"first_name": "Art",

"last_name": "Venere",

"address": "8 W Cerritos Ave #54",

"city": "Bridgeport",

"state": "NJ",

"zip": 8014,

"donor": true

},

{

"student_id": 104,

"first_name": "Lenna",

"last_name": "Paprocki",

"address": "639 Main St",

"city": "Anchorage",

"state": "AK",

"zip": 99501,

"donor": true

},

{

"student_id": 105,

"first_name": "Donette",

"last_name": "Foller",

"address": "34 Center St",

"city": "Hamilton",

"state": "OH",

"zip": 45011,

"donor": true

},

{

"student_id": 106,

"first_name": "Simona",

"last_name": "Morasca",

"address": "3 Mcauley Dr",

"city": "Ashland",

"state": "OH",

"zip": 44805,

"donor": true

},

{

"student_id": 107,

"first_name": "Mitsue",

"last_name": "Tollner",

"address": "7 Eads St",

"city": "Chicago",

"state": "IL",

"zip": 60632,

"donor": false

},

{

"student_id": 108,

"first_name": "Leota",

"last_name": "Dilliard",

"address": "7 W Jackson Blvd",

"city": "San Jose",

"state": "CA",

"zip": 95111,

"donor": true

},

{

"student_id": 109,

"first_name": "Sage",

"last_name": "Wieser",

"address": "5 Boston Ave #88",

"city": "Sioux Falls",

"state": "SD",

"zip": 57105,

"donor": true

},

{

"student_id": 110,

"first_name": "Kris",

"last_name": "Marrier",

"address": "228 Runamuck Pl #2808",

"city": "Baltimore",

"state": "MD",

"zip": 21224,

"donor": true

},

{

"student_id": 111,

"first_name": "Minna",

"last_name": "Amigon",

"address": "2371 Jerrold Ave",

"city": "Kulpsville",

"state": "PA",

"zip": 19443,

"donor": false

},

{

"student_id": 112,

"first_name": "Abel",

"last_name": "Maclead",

"address": "37275 St Rt 17m M",

"city": "Middle Island",

"state": "NY",

"zip": 11953,

"donor": true

},

{

"student_id": 113,

"first_name": "Kiley",

"last_name": "Caldarera",

"address": "25 E 75th St #69",

"city": "Los Angeles",

"state": "CA",

"zip": 90034,

"donor": true

},

{

"student_id": 114,

"first_name": "Graciela",

"last_name": "Ruta",

"address": "98 Connecticut Ave Nw",

"city": "Chagrin Falls",

"state": "OH",

"zip": 44023,

"donor": true

},

{

"student_id": 115,

"first_name": "Cammy",

"last_name": "Albares",

"address": "56 E Morehead St",

"city": "Laredo",

"state": "TX",

"zip": 78045,

"donor": true

},

{

"student_id": 116,

"first_name": "Mattie",

"last_name": "Poquette",

"address": "73 State Road 434 E",

"city": "Phoenix",

"state": "AZ",

"zip": 85013,

"donor": true

},

{

"student_id": 117,

"first_name": "Meaghan",

"last_name": "Garufi",

"address": "69734 E Carrillo St",

"city": "Mc Minnville",

"state": "TN",

"zip": 37110,

"donor": false

},

{

"student_id": 118,

"first_name": "Gladys",

"last_name": "Rim",

"address": "322 New Horizon Blvd",

"city": "Milwaukee",

"state": "WI",

"zip": 53207,

"donor": true

},

{

"student_id": 119,

"first_name": "Yuki",

"last_name": "Whobrey",

"address": "1 State Route 27",

"city": "Taylor",

"state": "MI",

"zip": 48180,

"donor": true

},

{

"student_id": 120,

"first_name": "Fletcher",

"last_name": "Flosi",

"address": "394 Manchester Blvd",

"city": "Rockford",

"state": "IL",

"zip": 61109,

"donor": true

},

{

"student_id": 121,

"first_name": "Bette",

"last_name": "Nicka",

"address": "6 S 33rd St",

"city": "Aston",

"state": "PA",

"zip": 19014,

"donor": true

},

{

"student_id": 122,

"first_name": "Veronika",

"last_name": "Inouye",

"address": "6 Greenleaf Ave",

"city": "San Jose",

"state": "CA",

"zip": 95111,

"donor": true

},

{

"student_id": 123,

"first_name": "Willard",

"last_name": "Kolmetz",

"address": "618 W Yakima Ave",

"city": "Irving",

"state": "TX",

"zip": 75062,

"donor": true

},

{

"student_id": 124,

"first_name": "Maryann",

"last_name": "Royster",

"address": "74 S Westgate St",

"city": "Albany",

"state": "NY",

"zip": 12204,

"donor": true

},

{

"student_id": 125,

"first_name": "Alisha",

"last_name": "Slusarski",

"address": "3273 State St",

"city": "Middlesex",

"state": "NJ",

"zip": 8846,

"donor": true

}

],

Objectives - Demonstrate your ability to create a Vue.js program that displays, searches and filters data. - You will need to demonstrate your knowledge of: Initializing variables and assigning data Syntax for Print and Input functions Boolean expressions Vue Directives: v-for, v-html, v-if, v-else, filtering data with Vue Building a form and showing and hiding content. Ability to debug errors found in a simple JavaScript program. Directions 1. You will create a simple application similar to what we discussed in the lecture on Display, Looping, Searching Data in Vue.js. The Data for this project is in the form of a JSON file of Alumni of a university. Most of the fields are the typical name and address field and the last field in a binary field showing if the alumnus had donated to the university in the last 12 months. Below is a sample of 4 records. And a link to the actual file which contains 25 records. No filter applied. Shows onlv first 5 of 25 records in full JSON file: First Name Filter Applied - search for all first names with "j" in first name. Field: Query: 101 James Butler 6649 N Blue Gum St New Orleans LA 70116 false 102 Josephine Darakjy 4 B Blue Ridge Blvd Brighton MI 48116 true You should create the application to search and filter on First Name, Last Name Address, City and State for full credit