[英]Typescript: How can I extract the value from JSON objects inside an array with changing property names?
I'm new to typescript and would like to extract the value from JSON objects inside an array with changing property names.我是 typescript 的新手,想从数组中的 JSON 对象中提取值,并更改属性名称。
My (simplified) code is as follows:我的(简化的)代码如下:
const gridData = [
{ "source_language": "en", "word": "man", "character_grid": [["i", "q", "\u00ed", "l", "n", "n", "m", "\u00f3"], ["f", "t", "v", "\u00f1", "b", "m", "h", "a"], ["h", "j", "\u00e9", "t", "e", "t", "o", "z"], ["x", "\u00e1", "o", "i", "e", "\u00f1", "m", "\u00e9"], ["q", "\u00e9", "i", "\u00f3", "q", "s", "b", "s"], ["c", "u", "m", "y", "v", "l", "r", "x"], ["\u00fc", "\u00ed", "\u00f3", "m", "o", "t", "e", "k"], ["a", "g", "r", "n", "n", "\u00f3", "s", "m"]], "word_locations": { "6,1,6,2,6,3,6,4,6,5,6,6": "hombre" }, "target_language": "es" },
{ "source_language": "en", "word": "woman", "character_grid": [["v", "\u00e1", "q", "t", "b", "f", "q"], ["y", "x", "i", "a", "\u00fc", "v", "a"], ["r", "d", "y", "\u00ed", "t", "n", "a"], ["f", "v", "\u00f3", "w", "l", "a", "v"], ["b", "u", "\u00fa", "j", "q", "h", "\u00e1"], ["c", "o", "m", "u", "j", "e", "r"], ["h", "o", "d", "\u00fa", "w", "d", "\u00fc"]], "word_locations": { "2,5,3,5,4,5,5,5,6,5": "mujer" }, "target_language": "es" },
{ "source_language": "en", "word": "boy", "character_grid": [["x", "c", "e", "x", "c", "i", "o"], ["e", "z", "q", "r", "h", "w", "y"], ["\u00f1", "\u00e9", "\u00f1", "w", "i", "n", "\u00e1"], ["o", "l", "a", "\u00e1", "c", "i", "n"], ["r", "v", "\u00f1", "s", "o", "\u00f1", "w"], ["k", "m", "w", "a", "\u00fc", "o", "w"], ["\u00f3", "r", "\u00fa", "b", "l", "g", "\u00fa"]], "word_locations": { "5,2,5,3,5,4,5,5": "ni\u00f1o", "4,0,4,1,4,2,4,3,4,4": "chico" }, "target_language": "es" },
{ "source_language": "en", "word": "girl", "character_grid": [["o", "s", "\u00f3", "x", "h", "\u00f1", "h"], ["\u00fc", "r", "g", "o", "l", "\u00fa", "b"], ["a", "t", "c", "h", "i", "c", "a"], ["u", "\u00fa", "r", "w", "\u00e1", "t", "\u00e9"], ["p", "n", "v", "r", "q", "m", "l"], ["f", "d", "t", "e", "a", "\u00f3", "l"], ["u", "t", "n", "i", "\u00f1", "a", "s"]], "word_locations": { "2,2,3,2,4,2,5,2,6,2": "chica", "2,6,3,6,4,6,5,6": "ni\u00f1a" }, "target_language": "es" },
{ "source_language": "en", "word": "am", "character_grid": [["d", "c", "e", "h", "p"], ["f", "e", "\u00fc", "p", "t"], ["s", "s", "\u00f3", "\u00ed", "l"], ["o", "s", "\u00ed", "\u00f1", "a"], ["y", "g", "i", "o", "n"]], "word_locations": { "0,2,0,3,0,4": "soy" }, "target_language": "es" },
{ "source_language": "en", "word": "she", "character_grid": [["z", "n", "w", "f", "m", "\u00e9"], ["d", "\u00f3", "q", "w", "n", "e"], ["z", "\u00e1", "v", "e", "\u00f3", "l"], ["r", "c", "z", "z", "m", "l"], ["\u00fc", "m", "\u00e1", "\u00fc", "n", "a"], ["e", "a", "e", "x", "\u00f1", "h"]], "word_locations": { "5,1,5,2,5,3,5,4": "ella" }, "target_language": "es" },
{ "source_language": "en", "word": "apple", "character_grid": [["\u00fa", "k", "\u00fc", "b", "\u00ed", "n", "z", "d", "o"], ["u", "\u00e1", "n", "g", "e", "y", "z", "o", "\u00f1"], ["o", "\u00e9", "\u00fa", "\u00e1", "v", "e", "x", "u", "m"], ["c", "w", "d", "z", "t", "k", "m", "l", "a"], ["u", "b", "o", "w", "\u00ed", "a", "u", "q", "n"], ["g", "s", "m", "e", "c", "n", "k", "\u00fa", "z"], ["a", "o", "v", "t", "p", "\u00fa", "\u00e9", "k", "a"], ["f", "j", "i", "j", "n", "i", "b", "\u00f3", "n"], ["s", "q", "l", "j", "j", "f", "q", "g", "a"]], "word_locations": { "8,2,8,3,8,4,8,5,8,6,8,7,8,8": "manzana" }, "target_language": "es" },
{ "source_language": "en", "word": "eat", "character_grid": [["i", "a", "c", "j", "r", "w"], ["k", "b", "n", "o", "u", "v"], ["v", "x", "z", "f", "m", "a"], ["u", "l", "o", "p", "e", "o"], ["l", "\u00fa", "\u00e9", "q", "j", "e"], ["a", "h", "\u00fa", "l", "k", "w"]], "word_locations": { "2,0,3,1,4,2,5,3": "como" }, "target_language": "es" },
{ "source_language": "en", "word": "bread", "character_grid": [["\u00fc", "\u00e1", "p", "a", "n"], ["k", "a", "k", "m", "l"], ["a", "x", "q", "e", "h"], ["p", "s", "a", "j", "\u00ed"], ["\u00e1", "q", "l", "j", "l"]], "word_locations": { "2,0,3,0,4,0": "pan" }, "target_language": "es" }
];
const gridDataInUse = gridData[0];
const selectedLetters = [{x: 6, y: 1, l: "h"}, {x: 6, y: 2, l: "o"}, {x: 6, y: 3, l: "m"}, {x: 6, y: 4, l: "b"}, {x: 6, y: 5, l: "r"}, {x: 6, y: 6, l: "e"}]
const letterCoordinates: number[] = []
selectedLetters.forEach((letter => {
letterCoordinates.push(letter.x);
letterCoordinates.push(letter.y);
}));
const letterCoordinatesAsString = letterCoordinates.join(',');
const selectedWord = selectedLetters.map((letter) => {
return letter.l;
}).join('');
console.log(gridDataInUse.word_locations[letterCoordinatesAsString]);
My goal in this example is to extract "hombre" from the first JSON object in the array.我在这个例子中的目标是从数组中的第一个 JSON object 中提取“hombre”。
However, I get the following error message:但是,我收到以下错误消息:
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{ "6,1,6,2,6,3,6,4,6,5,6,6": string;
元素隐式具有“任何”类型,因为“字符串”类型的表达式不能用于索引类型“{“6,1,6,2,6,3,6,4,6,5,6,6” : 细绳; "2,5,3,5,4,5,5,5,6,5"?: undefined;
“2,5,3,5,4,5,5,5,6,5”?:未定义; "5,2,5,3,5,4,5,5"?: undefined;
“5,2,5,3,5,4,5,5”?:未定义; "4,0,4,1,4,2,4,3,4,4"?: undefined;
“4,0,4,1,4,2,4,3,4,4”?:未定义; "2,2,3,2,4,2,5,2,6,2"?: undefined;
“2,2,3,2,4,2,5,2,6,2”?:未定义; "2,6,3,6,4,6,5,6"?: undefined;
“2,6,3,6,4,6,5,6”?:未定义; ... 4 more...;
... 4 更多...; "2,0,3,0,4,0"?: undefined;
“2,0,3,0,4,0”?:未定义; } |... 7 more... |
|... 7 更多... | {...;
{...; }'.
}'。 No index signature with a parameter of type 'string' was found on type '{ "6,1,6,2,6,3,6,4,6,5,6,6": string;
在类型 '{ "6,1,6,2,6,3,6,4,6,5,6,6": string; 上找不到参数类型为 'string' 的索引签名; "2,5,3,5,4,5,5,5,6,5"?: undefined;
“2,5,3,5,4,5,5,5,6,5”?:未定义; "5,2,5,3,5,4,5,5"?: undefined;
“5,2,5,3,5,4,5,5”?:未定义; "4,0,4,1,4,2,4,3,4,4"?: undefined;
“4,0,4,1,4,2,4,3,4,4”?:未定义; "2,2,3,2,4,2,5,2,6,2"?: undefined;
“2,2,3,2,4,2,5,2,6,2”?:未定义; "2,6,3,6,4,6,5,6"?: undefined;
“2,6,3,6,4,6,5,6”?:未定义; ... 4 more...;
... 4 更多...; "2,0,3,0,4,0"?: undefined;
“2,0,3,0,4,0”?:未定义; } |... 7 more... |
|... 7 更多... | {...;
{...; }'.(7053)
}'.(7053)
How can I solve this error?我该如何解决这个错误?
Thanks a lot for your help!非常感谢你的帮助!
If you're absolutely certain that every letterCoordinatesAsString
you construct will have a matching property in the object you're looking at, a simple enough fix would be to tell TS that the word_locations
object is a Record<string, string>
, allowing you to look up the object with your letterCoordinatesAsString
string:如果您绝对确定您构造的每个
letterCoordinatesAsString
都会在您正在查看的 object 中具有匹配的属性,那么一个足够简单的解决方法是告诉 TS word_locations
object 是一个Record<string, string>
,允许您使用您的letterCoordinatesAsString
字符串查找 object:
const gridData: Array<{
source_language: string;
word: string;
// ...
word_locations: Record<string, string>;
}> = [
{ "source_language": "en", ...
TypeScript generally doesn't play as nicely with dynamic property names as would be ideal. TypeScript 通常不能像理想的那样很好地使用动态属性名称。 Another option is to resort to a type assertion after an
in
check, that tests whether the property exists on the object, telling the programmer that it's safe to access, but without giving TypeScript more information to infer from.另一种选择是
in
检查后诉诸类型断言,测试该属性是否存在于 object 上,告诉程序员它可以安全访问,但不向 TypeScript 提供更多信息以供推断。
const { word_locations } = gridDataInUse;
if (letterCoordinatesAsString in word_locations) {
console.log((word_locations as Record<string, string | undefined>)[letterCoordinatesAsString]);
}
Typing the data as const
could help, turning the word_locations
from a union (with undefined
possible values) into the type of a much simpler object. This won't affect things if you're just logging the result, but it'll let TS infer the value as a string
, and not as string | undefined
将数据键入
as const
可能会有所帮助,将word_locations
从联合(具有undefined
的可能值)转换为更简单的类型 object。如果您只是记录结果,这不会影响事情,但它会让 TS将值推断为string
,而不是string | undefined
string | undefined
, and lets you avoid the ugly as
assertion. string | undefined
,并让你避免丑陋as
断言。
const gridData = [
{ "source_language": "en", "word": ...
] as const;
// ...
if (letterCoordinatesAsString in word_locations) {
console.log(word_locations[letterCoordinatesAsString]);
}
Please Provide a type to your array, TS is getting confused because of the "," in your word_location object, following will work请为您的数组提供一个类型,TS 会因为您的 word_location object 中的“,”而感到困惑,以下将起作用
interface gridItem { source_language: string, word: string, character_grid: Array<Array<string>> word_locations: Record<string, string>, target_language: string } const gridData:Array<gridItem> = [ { "source_language": "en", "word": "man", "character_grid": [["i", "q", "í", "l", "n", "n", "m", "ó"], ["f", "t", "v", "ñ", "b", "m", "h", "a"], ["h", "j", "é", "t", "e", "t", "o", "z"], ["x", "á", "o", "i", "e", "ñ", "m", "é"], ["q", "é", "i", "ó", "q", "s", "b", "s"], ["c", "u", "m", "y", "v", "l", "r", "x"], ["ü", "í", "ó", "m", "o", "t", "e", "k"], ["a", "g", "r", "n", "n", "ó", "s", "m"]], "word_locations": { "6,1,6,2,6,3,6,4,6,5,6,6": "hombre" }, "target_language": "es" }, { "source_language": "en", "word": "woman", "character_grid": [["v", "á", "q", "t", "b", "f", "q"], ["y", "x", "i", "a", "ü", "v", "a"], ["r", "d", "y", "í", "t", "n", "a"], ["f", "v", "ó", "w", "l", "a", "v"], ["b", "u", "ú", "j", "q", "h", "á"], ["c", "o", "m", "u", "j", "e", "r"], ["h", "o", "d", "ú", "w", "d", "ü"]], "word_locations": { "2,5,3,5,4,5,5,5,6,5": "mujer" }, "target_language": "es" }, { "source_language": "en", "word": "boy", "character_grid": [["x", "c", "e", "x", "c", "i", "o"], ["e", "z", "q", "r", "h", "w", "y"], ["ñ", "é", "ñ", "w", "i", "n", "á"], ["o", "l", "a", "á", "c", "i", "n"], ["r", "v", "ñ", "s", "o", "ñ", "w"], ["k", "m", "w", "a", "ü", "o", "w"], ["ó", "r", "ú", "b", "l", "g", "ú"]], "word_locations": { "5,2,5,3,5,4,5,5": "niño", "4,0,4,1,4,2,4,3,4,4": "chico" }, "target_language": "es" }, { "source_language": "en", "word": "girl", "character_grid": [["o", "s", "ó", "x", "h", "ñ", "h"], ["ü", "r", "g", "o", "l", "ú", "b"], ["a", "t", "c", "h", "i", "c", "a"], ["u", "ú", "r", "w", "á", "t", "é"], ["p", "n", "v", "r", "q", "m", "l"], ["f", "d", "t", "e", "a", "ó", "l"], ["u", "t", "n", "i", "ñ", "a", "s"]], "word_locations": { "2,2,3,2,4,2,5,2,6,2": "chica", "2,6,3,6,4,6,5,6": "niña" }, "target_language": "es" }, { "source_language": "en", "word": "am", "character_grid": [["d", "c", "e", "h", "p"], ["f", "e", "ü", "p", "t"], ["s", "s", "ó", "í", "l"], ["o", "s", "í", "ñ", "a"], ["y", "g", "i", "o", "n"]], "word_locations": { "0,2,0,3,0,4": "soy" }, "target_language": "es" }, { "source_language": "en", "word": "she", "character_grid": [["z", "n", "w", "f", "m", "é"], ["d", "ó", "q", "w", "n", "e"], ["z", "á", "v", "e", "ó", "l"], ["r", "c", "z", "z", "m", "l"], ["ü", "m", "á", "ü", "n", "a"], ["e", "a", "e", "x", "ñ", "h"]], "word_locations": { "5,1,5,2,5,3,5,4": "ella" }, "target_language": "es" }, { "source_language": "en", "word": "apple", "character_grid": [["ú", "k", "ü", "b", "í", "n", "z", "d", "o"], ["u", "á", "n", "g", "e", "y", "z", "o", "ñ"], ["o", "é", "ú", "á", "v", "e", "x", "u", "m"], ["c", "w", "d", "z", "t", "k", "m", "l", "a"], ["u", "b", "o", "w", "í", "a", "u", "q", "n"], ["g", "s", "m", "e", "c", "n", "k", "ú", "z"], ["a", "o", "v", "t", "p", "ú", "é", "k", "a"], ["f", "j", "i", "j", "n", "i", "b", "ó", "n"], ["s", "q", "l", "j", "j", "f", "q", "g", "a"]], "word_locations": { "8,2,8,3,8,4,8,5,8,6,8,7,8,8": "manzana" }, "target_language": "es" }, { "source_language": "en", "word": "eat", "character_grid": [["i", "a", "c", "j", "r", "w"], ["k", "b", "n", "o", "u", "v"], ["v", "x", "z", "f", "m", "a"], ["u", "l", "o", "p", "e", "o"], ["l", "ú", "é", "q", "j", "e"], ["a", "h", "ú", "l", "k", "w"]], "word_locations": { "2,0,3,1,4,2,5,3": "como" }, "target_language": "es" }, { "source_language": "en", "word": "bread", "character_grid": [["ü", "á", "p", "a", "n"], ["k", "a", "k", "m", "l"], ["a", "x", "q", "e", "h"], ["p", "s", "a", "j", "í"], ["á", "q", "l", "j", "l"]], "word_locations": { "2,0,3,0,4,0": "pan" }, "target_language": "es" } ]; const gridDataInUse = gridData[0]; const selectedLetters = [{x: 6, y: 1, l: "h"}, {x: 6, y: 2, l: "o"}, {x: 6, y: 3, l: "m"}, {x: 6, y: 4, l: "b"}, {x: 6, y: 5, l: "r"}, {x: 6, y: 6, l: "e"}] const letterCoordinates: number[] = [] selectedLetters.forEach((letter => { letterCoordinates.push(letter.x); letterCoordinates.push(letter.y); })); const letterCoordinatesAsString = letterCoordinates.join(','); const selectedWord = selectedLetters.map((letter) => { return letter.l; }).join(''); console.log(gridDataInUse.word_locations[letterCoordinatesAsString]);
you can check the below link that by providing type it is not compaling你可以检查下面的链接,通过提供类型它不是compaling
Your JSON is structured incorrectly.您的 JSON 结构不正确。 You are missing some curly brackets, try this...
你缺少一些大括号,试试这个......
const data = [
{ names: { "1,2": "Matthew" }},
{ names: { "2,3": "Marcus", "3,4": "Bill" }},
{ names: { "4,5": "Joana", "5,6": "Bob" }}
];
JSFiddle: https://jsfiddle.net/j6Lcv9pa/ JSFiddle: https://jsfiddle.net/j6Lcv9pa/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.