javascript - 如何映射包含空值的数据

Question

我正在尝试映射数据以显示信息，例如:日期、工作日、名称、价格和一些图像。每个对象都包含一些相同的信息，但每个对象都有不同数量的图像，或者在一些地方缺少值。

我可以在页面上正确显示数据，但由于图像数量不同或缺少数据，我似乎无法对其进行格式化。在某些缺少数据的地方有大片空白(就像它正在渲染缺少数据的字段)。

这是可以简单地用 CSS 完成的事情吗？缺失值目前只是空字符串，我不确定这是否是导致问题的部分原因？

我曾尝试使用 :empty 并将值更改为 null，但没有成功。

示例对象:

[
 {
  "id": 1,
  "date": "January 1",
  "weekday": "Friday",
  "price": "82¢ + tax",
  "img1": "https://firebasestorage.googleapis.com/v0/b/danceland-cr.appspot.com/o/1954%2F1954-13-1.jpg?alt=media&token=0afc6a81-cf73-4bd0-bb54-d6ee6eeb59c0" 
 },
 {
  "id": 2,
  "date": "January 2",
  "weekday": "Saturday",
  "price": "",
  "img1": "" 
]

我可以看到信息被映射到页面，但是有空白区域通常会丢失 img1 和 price 值。

Answer 1

如果你想创建包含空字符串('') 的null 值，那么你可以使用map() 方法来实现。

     const array = [{
        "id": 1,
        "date": "January 1",
        "weekday": "Friday",
        "price": "82¢ + tax",
        "img1": "https://firebasestorage.googleapis.com/v0/b/danceland-cr.appspot.com/o/1954%2F1954-13-1.jpg?alt=media&token=0afc6a81-cf73-4bd0-bb54-d6ee6eeb59c0"
}, {
        "id": 2,
        "date": "January 2",
        "weekday": "Saturday",
        "price": "",
        "img1": ""
}]

const result = array.map((r) => {
        const obj = {
                id: r.id,
                date: r.date,
                weekday: r.weekday,
                price: r.price || null,
                img1: r.img1 || null
        };
        return obj;
});

console.log(result);