嵌套json有效負載和嵌套陣列javascript面試-有解無憂

將此作為對 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
            }, [])
    }

uj5u.com熱心網友回復：

編輯：哎呀，忘了配置

盡量寫出最高效簡潔的代碼

當然......對我來說，“高效”意味著“可以理解”——如果他們想要性能，他們應該說“高效”不是 :)。和簡潔的代碼......好吧，這并不總是意味著高質量的代碼，所以我會嘗試平衡。

我的方法是至少在某種程度上統一資料，然后使用較小的函式并處理那里超級混亂的資料結構。

如果這是一個非常大的專案并且實際上需要一個更通用的專案，那么我才會考慮使用這些資料制作任何通用的東西。通常它實際上并不是必需的，只是引入了很多復雜性。

const payload1 = [
  {
    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",
        },
      ],
    ],
  },
];

const payload2 = [
  [
    {
      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",
          },
        },
      },
    },
  ],
];

// main function
const parseProducts = (data, config) => {
    const saneData = config.array ? data[0] : data[0].data;
    return saneData.map(product => {
        return [
            { type: 'TEXT',  value: getText(product, config) },   // 'Handbag'
            { type: 'URL',   value: getUrl(product, config) },    // 'https://example.com/products/handbag'
            { type: 'IMAGE', value: getImage(product, config) },  // 'https://example.com/products/handbag/images/medium.png'
            { type: 'TEXT',  value: getPrice(product, config) }   // '$50.00'
        ]
    });
};

const getText = (product, config) => {
    if (Array.isArray(product)) {
        return product[0].name;
    }
    const meta = product?.meta[config.lang];
    return meta?.product_name;
}

const getUrl = (product, config) => {
    if (Array.isArray(product)) {
        return product[0].url;
    }
    const meta = product?.meta[config.lang];
    return meta?.product_urls[0];
}

const getImage = (product, config) => {
    if (Array.isArray(product)) {
        return product[0].images.medium;
    }
    const meta = product?.meta[config.lang];
    return meta?.product_image_medium;
}

const getPrice = (product, config) => {
    if (Array.isArray(product)) {
        return product[0].price;
    }
    const meta = product?.meta[config.lang];
    return meta?.product_custom_attributes.product_price_string;
}

// Test
console.log(parseProducts(payload1, { array: 0 }));
console.log(parseProducts(payload2, { array: 1, lang: "en_US" }));

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/336678.html

標籤：javascript 数组 json 功能

上一篇：過濾包含日期的陣列

下一篇：從物件中的陣列中提取所需的數字