Javascript 如何映射包含空值的数据

我试图通过映射数据来显示信息，如：日期、工作日、姓名、价格和一些图像。每个对象都包含一些相同的信息，但每个对象都有不同数量的图像，或者在几个点中缺少一个值

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

这是可以简单地用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

值通常会出现在空白处。

如果要使

null

值包含空字符串（

'

），则可以使用

map（）

方法实现

const数组=[{
“id”：1，
“日期”：“1月1日”，
“工作日”：“星期五”，
“价格”：“82美分+税金”，
“img1”：https://firebasestorage.googleapis.com/v0/b/danceland-cr.appspot.com/o/1954%2F1954-13-1.jpg？alt=媒体和令牌=0afc6a81-cf73-4bd0-bb54-d6ee6eeb59c0“
}, {
“id”：2，
“日期”：“1月2日”，
“工作日”：“星期六”，
“价格”：“，
“img1”：”
}]
const result=array.map（（r）=>{
常量对象={
id:r.id，
日期：r.date，
工作日：r.工作日，
价格：r.price | | null，
img1:r.img1 | | null
};
返回obj；
});
控制台日志（结果）请注意，JSON是一种“在线”使用的文本格式；一旦进入React或其他任何地方，它就只是普通的老JavaScript数组和对象。请参阅。您需要什么格式？另外，如果您可以向我们展示将此数据转换为HTML所使用的代码，这可能会帮助人们回答您的问题。您可以发布用于“在页面上显示数据”的函数吗？如果未定义值的返回值为
null
、空字符串或
undefined
，那么这就是CSS的大小问题。您是否对维度进行硬编码？除非您正在做一些明确创建空白的事情，否则空白不会神奇地出现