主页 / coding / 问题 / 79567340
Accepted
Skj0nes
Asked: 2025-04-11 02:21:23 +0800 CST

如何使用 NextJS 和 Typescript 提取并使用单独 JSON 文件中 JSON 对象内的值

  • 772

我创建了一个 JSON 文件，其中包含多个对象，这些对象包含分配给字符串的命名值，如下所示，

{
    "Obj1" : {
        "Val1": "Obj 1, Test Value 1",
        "Val2": "Obj 1, Test Value 2",
        "Val3": "Obj 1, Test Value 3"
    },
    "Obj2" : {
        "Val1": "Obj 2, Test Value 1",
        "Val2": "Obj 2, Test Value 2",
        "Val3": "Obj 2, Test Value 3"
    }
}

我需要在 Next JS 中单独访问每个对象中的每个值，我尝试导入和解析数据，

import data from '~/data.json';
const obj1: any = JSON.parse(data["Obj1"]); // Side Note: What type should this const be?
console.log(obj1.Val1); // Desired Output: " Obj1, Test Value 1 "

但是，当我尝试这样做时，我遇到了这个错误，“类型为‘{Val1：string;}’的参数不能分配给类型为‘string’的参数。ts(2345)”

无论我怎么操作，都找不到解决此错误的方法。我的 JSON 或 TS 格式不正确吗？

json

1 个回答

  1. Best Answer

    问题在于JSON.parse(data["Obj1"]);表达方式。

    通过这样做，JSON.parse(data["Obj1"]);你实际上是在调用JSON.parse这个对象：

    {
    "Val1": "Obj 1, Test Value 1",
    "Val2": "Obj 1, Test Value 2",
    "Val3": "Obj 1, Test Value 3"
}

    但是，JSON.parse需要一个字符串作为参数（并且该字符串将被转换为对象）。例如：

    const obj = JSON.parse('{"name":"John", "age":30, "city":"New York"}');

    Val1因此，您只需执行以下操作即可解决问题并获得价值：

    import data from '~/data.json';

// In Next.js + TS, by default the `data` object should be already correctly typed as an object. 
// However, if this is not the case, you can type it manually with an interface 
// or with the object type Record<K, T> 
const obj1: Record<string, string> = data["Obj1"]; 

console.log(obj1["Val1"]); // Output: "Obj1, Test Value 1"
    • 1

相关问题