Javascript 电子表格提取中的三元运算符

Question

我有这段代码，但我想添加一个三元运算符，这样如果电子表格中的单元格为空，它就会被一个空白空间替换，从而避免“无法解构‘object null’的属性‘v’，因为它是 null ’

(async () => {
  const data = JSON.parse(
      (
        await (
          //we select the columns we want to use where the box in column C is checked
          await fetch(
            "https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/gviz/tq?&sheet=users&tq=Select%20A,B,C,D,E,F,G,H,I,J,K%20WHERE%20C=true"
          )
        ).text()
        //we remove the first 47chars and last 2 to remove the wrapping text
      ).slice(47, -2)
    )["table"],
    products = data["rows"].map((row) =>
      row["c"].reduce(
        (product, {
          v: value
        }, index) => ({
          ...product,
          [data["cols"][index]["label"]]: value
        }), {}
      )
);
...

我尝试自己添加它但它不起作用，我不熟悉 javascript 并且不明白为什么它不起作用。 这是我尝试过的：

[data["cols"][index]["label"]]: value ? value : ' ' ;

欢迎任何帮助

编辑以添加代码笔链接： https://codepen.io/Dendenzilla/pen/jOxvMZQ

Answer 1

OP 在评论中要求我提供帮助。

问题定义

OP 的代码在 Google 表格中查询以 JSONP 形式返回的表数据。 这通常会使用Google 表格 API进行处理，但在这种情况下，我们使用自定义代码来执行此操作。 此代码将 JSONP 解析为普通 JSON，将其转换为工作表 object，最后将其转换为用于构建 GUI 的产品项数组。 这可行，但有时产品项会返回 null 个值，这会导致错误。

解决方案

这些值通常是字符串，但 Google Sheets 也有数字、Boolean 和其他数据类型。 所以我们需要将 null 和 undefined 设置为空字符串，但不是零和 false。 并且可以使用value === null || value === undefined完成测试 value === null || value === undefined或简写版本value == null 。 有关详细信息，请参阅此 SO问题。

我们将此测试添加到转换中，以便没有产品项具有 null 值。 请参阅示例片段。

其他问题

虽然不是问题的一部分，但代码可以大大简化和改进。

代码非常单一，难以遵循。 需要分解成更小的块。

该代码使用与 object 点表示法不兼容的属性名称。 括号表示法导致大量额外代码。

该代码创建了 HTML 的大块，将其附加到页面，然后用数据回填。 模板文字将消除大部分额外代码。

该页面完全使用自定义 css 而不是像 Bootstrap 这样的流行库之一。 这使得其他人更难理解和维护。

代码片段

标记为 ETL 的代码部分显示了如何将属性键转换为驼峰式命名法以进行点表示法，并将 null 值转换为空字符串。 然而，这会更改示例数据中所示的产品项架构。 GUI 代码将不需要重新编写以使用新的属性名称，但这也将消除对大部分代码的需求。

  // Query Google Sheet for data
  // The query returns JSONP which must be converted to a JSON string and then a table object
  
  const query = "https://docs.google.com/spreadsheets/d/1tlqyTx48A-4CfgggWbpTbGd8SXCpCSO4UMV7Q0_ogJg/gviz/tq?&sheet=users&tq=Select%20A,B,C,D,E,F,G,H,I,J%20WHERE%20C=True";

  const json = await fetch( query )
    .then(response => response.text())
    .then(text => text.slice(47,-2))
    .catch(error => { throw error; });
  
    const data = JSON.parse(json);
    
  // ETL - The table columns and rows are transformed into an array of product items

    const products = data.table.rows.map(row => 
     data.table.cols.reduce((product, col, index) =>  {
         product[toCamelCase(col.label)] = getValue( row.c[index].v );
       return product;
     }, {} )
  );
  
// Helpers

// see: https://stackoverflow.com/q/5515310/943435
// optionally add other conversions and validations here
function getValue(value) { 
    return value === null || value === undefined ? "" : value;
}

// see: https://stackoverflow.com/a/2970667/943435
// used to create camelCase keys that are compatible with JavaScript dot notation
function toCamelCase(str) {
  return str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function(match, index) {
    if (+match === 0) return ""; // or if (/\s+/.test(match)) for white spaces
    return index === 0 ? match.toLowerCase() : match.toUpperCase();
  });
}

示例数据 Output

[
  {
    "title": "Neutrik XLR Female",
    "category": "Connectors",
    "productOnSalePage": true,
    "oldPrice": "9.24",
    "newPrice": "3.00",
    "units": "per unit",
    "subTitle": "5 pole chassis connector",
    "description": "Black housing & Gold contacts",
    "imageLink": "https://www.belram.be/wp-content/uploads/2022/10/nc5md-l-b-1.jpg",
    "productLink": "https://www.belram.be/product/connectors/audio/xlr/neutrik-nc5md-l-b-1-5-pole-male-d-size/"
  },
... more elements
]