【发布时间】：2021-12-10 18:36:52
【问题描述】：
将此作为 coderbyte.com 上前端位置的评估测试
我们集成了许多不同的 API 和服务。通常，在前端，我们与许多不同的产品推荐提供商集成。这通常看起来像是来自零售商的推荐产品的轮播，如果有兴趣，客户会考虑购买。产品推荐的 API 提供者具有所有不同类型的 API 响应，但我们将尝试在下面的代码中利用一种通用模式。
编写一个函数，该函数接收 JSON 有效负载和配置对象作为参数，并将 JSON 有效负载中的映射属性数组返回到可枚举值以呈现轮播。 JSON 有效负载将始终包含一个嵌套数组，该数组将包含有关要在轮播中显示的每个产品的嵌套数据。您可以定义用于读取嵌套数组和映射嵌套产品属性的配置对象。
尽量写出最高效、最简洁的代码。强烈建议使用现代函数方法，但不是必需的。
示例 1
JSON 负载输入
"payload": [
{
"data": [
[
{
"name": "Handbag",
"url": "https://example.com/products/handbag",
"images": {
"small": "https://example.com/products/handbag/images/small.png",
"medium": "https://example.com/products/handbag/images/medium.png",
"large": "https://example.com/products/handbag/images/large.png"
},
"color": "black",
"price": "$50.00"
}
],
[
{
"name": "Shoes",
"url": "https://example.com/products/shoes",
"images": {
"small": "https://example.com/products/shoes/images/small.png",
"medium": "https://example.com/products/shoes/images/medium.png",
"large": "https://example.com/products/shoes/images/large.png"
},
"color": "red",
"price": "$35.00"
}
]
]
}
]
}
预期输出
[
{ type: 'TEXT', value: 'Handbag' },
{ type: 'URL', value: 'https://example.com/products/handbag' },
{ type: 'IMAGE', value: 'https://example.com/products/handbag/images/medium.png' },
{ type: 'TEXT', value: '$50.00' }
],
[
{ type: 'TEXT', value: 'Shoes' },
{ type: 'URL', value: 'https://example.com/products/shoes' },
{ type: 'IMAGE', value: 'https://example.com/products/shoes/images/medium.png' },
{ type: 'TEXT', value: '$35.00' }
]
]
示例 2
JSON 负载输入
[
[
{
"product_id": "000001",
"meta": {
"en_US": {
"product_name": "Handbag",
"product_urls": ["https://example.com/products/handbag"],
"product_image_small": "https://example.com/products/handbag/images/small.png",
"product_image_medium": "https://example.com/products/handbag/images/medium.png",
"product_image_large": "https://example.com/products/handbag/images/large.png",
"product_price_cents": 5000,
"product_custom_attributes": {
"product_price_string": "$50.00",
"product_color": "black"
}
}
}
},
{
"product_id": "000002",
"meta": {
"en_US": {
"product_name": "Shoes",
"product_urls": ["https://example.com/products/shoes"],
"product_image_small": "https://example.com/products/shoes/images/small.png",
"product_image_medium": "https://example.com/products/shoes/images/medium.png",
"product_image_large": "https://example.com/products/shoes/images/large.png",
"product_price_cents": 3500,
"product_custom_attributes": {
"product_price_string": "$35.00",
"product_color": "red"
}
}
}
}
]
]
预期输出
[
[
{ type: 'TEXT', value: 'Handbag' },
{ type: 'URL', value: 'https://example.com/products/handbag' },
{ type: 'IMAGE', value: 'https://example.com/products/handbag/images/medium.png' },
{ type: 'TEXT', value: '$50.00' }
],
[
{ type: 'TEXT', value: 'Shoes' },
{ type: 'URL', value: 'https://example.com/products/shoes' },
{ type: 'IMAGE', value: 'https://example.com/products/shoes/images/medium.png' },
{ type: 'TEXT', value: '$35.00' }
]
]
我的解决方案不够动态，无法解析两个输入负载。它适用于Example 1
我的解决方案
var config = {
name: {type :"TEXT", label: "name", key: "name"},
url: {type :"URL", label: "url", key: "url"},
images: {type :"IMAGE", label: "image", key: "image", value: "medium"},
price: {type :"TEXT", label: "price", key: "price"},
}
function processData(payload, config) {
function getImage(obj, key) {
return Object.keys(obj).reduce((acc, cur) => {
if (cur.includes(key)) {
acc = acc + obj[cur];
}
return acc;
}, "")
}
return payload.payload[0].data.reduce(function(acc, cur) {
var temp = [];
Object.keys(config).forEach(function(c) {
console.log(c)
if (c == "images") {
var res = getImage(cur[0][c], config[c]["value"]);
var ob = {
type: config[c]["type"],
value: res
}
temp.push(ob);
}
else {
temp.push({
type: config[c]["type"],
value: cur[0][c]
})
}
});
acc.push(temp);
return acc
}, [])
}
【问题讨论】：
-
这里的问题到底是什么？
-
@mli 明确提及。请阅读
标签： javascript arrays json function