使用打字稿从 API 响应返回的数据创建数组

如何解决使用打字稿从 API 响应返回的数据创建数组

我是学习打字稿的新手，所以我正在尝试使用从 API 返回给我的数据创建一个数组。这是 API 向我返回信息的方式：

"balances":[13 items
0:{12 items
"asset":string"BADGER"
"balance":float1200.2723428815757
"depositedBalance":float1590.400428846141
"earnedBalance":float18.04701434825256
"earnedTokens":[1 item
0:{6 items
"address":string"0x3472A5A71965499acd81997a54BBA8D852C6E53d"
"balance":float18.04701434825256
"decimals":int18
"name":string"Badger"
"symbol":string"BADGER"
"value":float127.41192129866306
}
]

我需要访问从 0 到 13 的所有项目，并访问其中的 EarnToken，然后转换对象数组中的键值和浮点数。像这样：

const results = [
  {
    "value":float3423432432432423
  },{
    "value":float324324324324
  },]

我知道我必须使用一些 forEach 并且可能是 push 但我需要一些帮助，因为我有点迷茫。

解决方法

// Example data | DO NOT COPY!!!
const API_RESPONSE_DATA: IResponse = { balances: [{ asset: "BADGER",balance: .1,depositedBalance: .2,earnedBalance: .3,earnedTokens: [{ address: "Test Address 1",decimals: 10,name: "Badger 1",symbol: "BADGER 1",value: .1 },{ address: "Test Address 1.1",balance: .11,decimals: 1010,name: "Badger 1.1",symbol: "BADGER 1.1",value: .11 }] },{ asset: "BADGER",earnedTokens: [{ address: "Test Address 2",balance: .12,decimals: 20,name: "Badger 2",symbol: "BADGER 2",value: .12 }] },earnedTokens: [{ address: "Test Address 3",balance: .123,decimals: 30,name: "Badger 3",symbol: "BADGER 3",value: .123 }] }] };
// END

// --- Interfaces
interface IResponse {
    balances: IBalance[];
}

interface IBalance {
    asset: string;
    balance: number;
    depositedBalance: number;
    earnedBalance: number;
    earnedTokens: IToken[];
}

interface IToken {
    address: string;
    balance: number;
    decimals: number;
    name: string;
    symbol: string;
    value: number;
}
// END

// Reduce into results
const results: IToken[] = API_RESPONSE_DATA.balances.reduce<IToken[]>((results,balance) => {
    results.push(...balance.earnedTokens);
    return results;
},[]);

// Print results
console.log(results);

我在 API_RESPONSE_DATA 数组上使用了 reduce 方法，将其缩减为一个数组（称为结果），仅包含所有余额的 earnedTokens。

请注意，initialValue 的 reduce 是一个空数组 []。

reduce(...) 方法对数组的每个元素执行一个 reducer 函数（您提供的），从而产生单个输出值。

Typescript Playground here 中的工作示例。