javascript - 循环对象数组和格式值

Question

在我的 API 数据响应中，我尝试循环 items 中的对象数组。 我需要格式化对象内的每个值。 items 对象列表中的每个键都对应于我的 header 键中的格式类型。我还有一个 getFormat 函数来帮助格式化值

我的问题是，鉴于我拥有的结构，我将如何做到这一点？

// Data
const data = {
  header: {
    date: {
      feature: "Date",
      format: "date",
    },
    description: {
      feature: "Description",
      format: "text",
    },
    salary: {
      feature: "Salary",
      format: "currency",
    },
    score: {
      feature: "Score",
      format: "float",
    },
    useage: {
      feature: "Useage",
      format: "percentage",
    },
  },
  items: [
    {
      date: "2021-02-08",
      description: "Light",
      salary: "50000",
      score: 20,
      useage: 20,
    },
    {
      date: "2021-02-08",
      description: "Heavy",
      salary: "60000",
      score: 50.235,
      useage: 30,
    }
  ],
};

// format helper
export const getFormat = (value: any, format: FormatProp) => {
  let options: Intl.NumberFormatOptions;

  switch (format) {
      case "currency":
          options = { currency: "USD", style: "currency" };
          break;
      case "percentage":
          options = { style: "percent", maximumFractionDigits: 2 };
          break;
      case "float":
          options = { maximumFractionDigits: 2, minimumFractionDigits: 2 };
          break;
      case "text":
          return value;
      case "date":
          return value;
      default:
          throw Error("Wrong Format!");
  }
  return Intl.NumberFormat("en-US", options).format(value);
};

export type FormatProp =
  | "currency"
  | "percentage"
  | "float"
  | "text"
  | "date";

期望的输出

[{
  date: "2021-02-08",
  description: "Light",
  salary: "$50,000.00",
  score: "20.00",
  useage: "20%",
},
{
  date: "2021-02-08",
  description: "Heavy",
  salary: "$60,000",
  score: "50.24",
  useage: "30%",
}]

Answer 1

您将需要迭代数据项以获得具有正确输出的新数组。您还希望遍历对象中的每个键，并根据键是什么以及它在 header 中的表示方式来格式化关联的值。

因此，我们将映射项目，使用Object.entries来获取key数组和关联的值 然后使用 reduce 逐个键构建项目对象。

// Data
const data = {
  header: {
    date: {
      feature: 'Date',
      format: 'date',
    },
    description: {
      feature: 'Description',
      format: 'text',
    },
    salary: {
      feature: 'Salary',
      format: 'currency',
    },
    score: {
      feature: 'Score',
      format: 'float',
    },
    useage: {
      feature: 'Useage',
      format: 'percentage',
    },
  },
  items: [{
      date: '2021-02-08',
      description: 'Light',
      salary: '50000',
      score: 20,
      useage: 20,
    },
    {
      date: '2021-02-08',
      description: 'Heavy',
      salary: '60000',
      score: 50.235,
      useage: 30,
    },
  ],
};

// format helper
const getFormat = (value, format) => {
  let options;

  switch (format) {
    case 'currency':
      options = {
        currency: 'USD',
        style: 'currency'
      };
      break;
    case 'percentage':
      options = {
        style: 'percent',
        maximumFractionDigits: 2
      };
      break;
    case 'float':
      options = {
        maximumFractionDigits: 2,
        minimumFractionDigits: 2
      };
      break;
    case 'text':
      return value;
    case 'date':
      return value;
    default:
      throw Error('Wrong Format!');
  }
  return Intl.NumberFormat('en-US', options).format(value);
};

const output = data.items.map(item => // iterate over items
  Object.entries(item).reduce((a, [key, value]) => { // for each item get the key/value pairs
    const header = data.header[key]; // find the associated header
    return {
      ...a,
      [key]: header ? getFormat(value, header.format) : value, // if the header exists lets get the formatted value back, else return the previous value
    };
  }, {}),
);

console.log(output);