Typescript 如何将JSON响应映射到Vue路由?

Typescript 如何将JSON响应映射到Vue路由?,typescript,vue.js,vue-router,Typescript,Vue.js,Vue Router,我有一个用JSON响应的API,如下所示: { "Thriller": "Thriller books", "Biographical": "Biographical books", "Romance": "Romance books" } http://example.com/thriller http://example.com/biographi

我有一个用JSON响应的API,如下所示:

{
    "Thriller": "Thriller books",
    "Biographical": "Biographical books",
    "Romance": "Romance books"
}
http://example.com/thriller
http://example.com/biographical
http://example.com/romance
我想以这样的路线结束:

{
    "Thriller": "Thriller books",
    "Biographical": "Biographical books",
    "Romance": "Romance books"
}
http://example.com/thriller
http://example.com/biographical
http://example.com/romance
从本质上讲,API应该规定可以查看哪些类型的书籍。之后,
图书
组件将显示有关特定图书类型的通用数据。我的路由器配置走了这么远:

import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Books from './views/Books.vue';

Vue.use(Router);

var books: Record<string, string> = await fetch('http://example.com/api/available-books')
    .then((response) => response.json())
    .then((data) => {
        return data;
    });


export default new Router({ 
    mode: 'history',
    base: process.env.BASE_URL,
    routes: books.map((shortname: string, fullname: string) => ({ component: Books, path: `/${shortname}`)),
});

从“Vue”导入Vue;
从“vue路由器”导入路由器;
从“/views/Home.vue”导入主页;
从“/views/Books.vue”导入书籍;
Vue.use(路由器);
var books:Record=wait fetch('http://example.com/api/available-books')
.then((response)=>response.json())
。然后((数据)=>{
返回数据;
});
导出默认的新路由器({
模式:“历史”,
base:process.env.base\u URL,
routes:books.map((shortname:string,fullname:string)=>({component:books,path:`/${shortname}'),
});
然而,TS linter说,
map()
有两个问题:
TS1005:行尾应为逗号,而
TS2349:无法调用表达式-类型字符串没有调用签名(粗略翻译)


我不明白我该怎么做。也许有更好的方法来做我正在尝试的事情?我是SPA的新手。

啊……看看上面的json格式……map不起作用的原因是因为它是一个巨大的对象。map只适用于数组

两种解决方案…将json格式化为数组…例如

{
    "Thriller": "Thriller books",
    "Biographical": "Biographical books",
    "Romance": "Romance books"
}
const mappedToArray  = [];
for (const prop in json) {
    mappedToArray.push({[prop]:json[prop]});
}
console.log(mappedToArray) 
// output is:> Array [
//Object { Thriller: "Thriller books" },
// Object { Biographical: "Biographical books" },
// Object { Romance: "Romance books" }
//]

使用:Object.keys从对象中获取一个数组,然后可以使用map对该数组进行迭代

Object.keys(json).map(function(key, index) {
//your code here
});

如果您想使用正在使用的路线,这可能是生成路线的更干净的方法

const book={
“惊悚小说”:“惊悚小说”,
“传记”:“传记书”,
“浪漫”:“浪漫书”
}
const output=Object.entries(books.map)(book=>{
const[shortname,fullname]=book
返回{component:'Books',路径:`/${shortname.toLowerCase()}`}
})

console.log(output)
错误消息到底是什么?当您记录时,response.json()中的数据是否以数组的形式出现?@altruios有两个错误:
TS1005:comma expected
在行尾和
TS2349:Cannot invoke表达式-类型字符串没有调用签名
(粗略翻译)我尝试了第一种解决方案,但它仍然表示应该在最后使用逗号。如果您输出json,这就是上面的格式?如果您使用Object.keys(json).map(function(key,index){console.log(key+“”+index);});输出是什么?当我复制/粘贴json结构时,在codepen.io中出现意外标记…当我将其分配给一个消失的变量时。导致错误:``{“Thriller”:“Thriller books”,“Biographical”:“Biographical books”,“Romance”:“Romance books”}``不会导致错误``const books={“Thriller”:“惊悚小说”、“传记小说”、“浪漫小说”:“浪漫小说”}```