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

我有一个用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”：“惊悚小说”、“传记小说”、“浪漫小说”：“浪漫小说”}```