Object actions in vue - json

Question

I have the following structure in Vue.
The App.vue
export default {
name : "app",
router,
data() {
return {
items: {books:[], authors:[]}
};
},
created: function() {
customServiceInstance.makeAjaxCall("books.json", "get").then(res => {
this.items.books = res.books;
return res;
})
customServiceInstance.makeAjaxCall("authors.json", "get").then(res => {
this.items.authors = res.authors;
return res;
})
customServiceInstance.makeAjaxCall("genres.json", "get").then(res => {
this.items.genres = res.genres;
return res;
})
},
methods: {
removeEntry:function(index) {
this.$delete(this.items.books, index);
customServiceInstance.makeAjaxCall('books.json', 'POST', JSON.stringify(this.items.books));
}
},
computed: {
booksWithAuthor () {
let { books, authors } = this.items
return books.map(book => ({
...book,
author: authors.find(author => author.id === book.author),
}))
},
}
}
</script>
<template>
<div id="app">
<router-link to="/home" >Home 1</router-link>
<router-link to="/home/2"> Home 2</router-link>
<router-view class="view" foo="123"></router-view>
<table class="booksTable">
<thead>
<tr>
<th>Title</th>
<th>Author</th>
<th>Genre</th>
<th>Image</th>
<th>Availability</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-for="(book,index) in booksWithAuthor" v-bind:key="book.name">
<td>{{book.name}}</td>
<td>{{book.author.name}}</td>
<td>{{book.genre}}</td>
<td><img class="imageBook" :src="book.imageUrl"></td>
<td v-if="book.availability">Available</td>
<td v-else>Unavailable</td>
<td>
<button class="btn add">Add</button>
<button class="btn edit" >Edit</button>
<button class="btn delete" v-on:click="removeEntry(index)">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import './styling.scss';
import customService from './components/customService';
const customServiceInstance= new customService();
import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeR from './components/home.vue';
import Copil from './components/copil.vue';
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{path: '/home', component: HomeR},
{path: '/home/:years', component: Copil, props:true }
]
})
And this JS
export default class CustomService {
listJson(url){
var storageLocalData = localStorage.getItem(url);
var obj=JSON.parse(storageLocalData);
console.log(obj);
};
makeAjaxCall(url, methodType, data){
this.listJson(url);
var promiseObj = new Promise(function(resolve, reject){
var storageLocalData = localStorage.getItem(url);
if(!storageLocalData){
var xhr = new XMLHttpRequest();
xhr.open(methodType, url, true);
if (data) {
xhr.send(data);
} else {
xhr.send();
}
xhr.onreadystatechange = function(){
if (xhr.readyState === 4){
if (xhr.status === 200){
var response = xhr.responseText;
var respJson = JSON.parse(response);
localStorage.setItem(url, JSON.stringify(respJson));
resolve(respJson);
} else {
reject(xhr.status);
}
}
}
}
else {
resolve(JSON.parse(storageLocalData));
}
});
return promiseObj;
};
}
I want to create an object Book and have a function getBookById(id, list),
The list being the books.json that's being loaded.I want this function to return the book object, who has name, author, genre and so on.
I tried a lot of things, but with no result.
Even tried in a ts file something like this:
export default class Book {
name: String;
id: Number;
author: String;
genre: Number;
imageUrl: String;
availability: boolean;
methods: {
getBookById:(id: Number,url: String) => Book {
}
}
Please help me

Answer 1

I want to create an object Book and have a function getBookById(id,
list), The list being the books.json that's being loaded.I want this
function to return the book object, who has name, author, genre
this can be achieved by the es6 array function find().
all you have to do inside your function, is:
getBookById(bookId,booksList){
return booksList.find(book=>
book.id===bookId)
}
the function will return the first array item that matches the condition (book.id===bookId), or undefined if none of them did match.