将对象数组中的未定义值替换为图像-解网

问：

<div id="en">
  <!--Begin 2COLTBL-->
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#F1F2F2" style="padding: 20px 0px 10px 0px;">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td width="45%" align="center" valign="top" id="enoffer0" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%"></td>
        <td width="45%" align="center" valign="top" id="enoffer1" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  <!--End 2COLTBL-->

  <!--Begin 2COLTBL-->
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#F1F2F2" style="padding: 10px 0px 10px 0px;">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td width="45%" align="center" valign="top" id="enoffer2" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%"></td>
        <td width="45%" align="center" valign="top" id="enoffer3" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  <!--End 2COLTBL-->

  <!--Begin 2COLTBL-->
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#F1F2F2" style="padding: 10px 0px 10px 0px;">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td width="45%" align="center" valign="top" id="enoffer4" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%"></td>
        <td width="45%" align="center" valign="top" id="enoffer5" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  <!--End 2COLTBL-->

  <!--Begin 2COLTBL-->
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#F1F2F2" style="padding: 10px 0px 10px 0px;">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td width="45%" align="center" valign="top" id="enoffer6" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%"></td>
        <td width="45%" align="center" valign="top" id="enoffer7" bgcolor="#FFFFFF" style="padding: 20px 0px 20px 0px"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  <!--End 2COLTBL-->

  <!--Begin 2COLTBL-->
  <table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#F1F2F2" style="padding: 10px 0px 10px 0px;">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td width="45%" align="center" valign="top" id="enoffer8" bgcolor="#FFFFFF" style="padding: 10px 0px 10px 0px"></td>
        <td width="3%"></td>
        <td width="45%" align="center" valign="top" id="enoffer9" bgcolor="#FFFFFF" style="padding: 10px 0px 10px 0px"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  <!--End 2COLTBL-->
</div>

<script>
  const offersData = [{
      "partner": "Partner 1",
      "code": "CODE",
      "lang": "e",
      "headline": "Headline 1",
      "desc": "Description 1",
      "enddate": "ENDDATE",
      "cta": "CTA",
      "url": "URL"
    },
    {
      "partner": "Partner 2",
      "code": "CODE",
      "lang": "e",
      "headline": "Headline 2",
      "desc": "Description 2",
      "enddate": "ENDDATE",
      "cta": "CTA",
      "url": "URL"
    },
    {
      "partner": "Partner 3",
      "code": "CODE",
      "lang": "e",
      "headline": "Headline 3",
      "desc": "Description 3",
      "enddate": "ENDDATE",
      "cta": "CTA",
      "url": "URL"
    },
    {
      "partner": "Partner 4",
      "code": "CODE",
      "lang": "e",
      "headline": "Headline 4",
      "desc": "Description 4",
      "enddate": "ENDDATE",
      "cta": "CTA",
      "url": "URL"
    },
    {
      "partner": "Partner 5",
      "code": "CODE",
      "lang": "e",
      "headline": "Headline 5",
      "desc": "Description 5",
      "enddate": "ENDDATE",
      "cta": "CTA",
      "url": "URL"
    }
  ]

  const contentContainer = function offerContent() {
    return `<!--Begin 1COLTBL--> 
      <!--Begin IMGSML-->
      <div><img role="presentation" src="${this.code}_${this.lang}.png" alt="" width="150" class="Img" style="vertical-align: bottom;" border="0"></div>
      <!--End IMGSML-->
        <br>
      <h4 style="font-size: 19px; font-family: 'Montserrat', Arial, Helvetica, sans-serif; line-height: 24px; color: #FFFFFF; margin: 0; padding: 20px 10px 20px 10px; background-color: #6ccbdd" class"SubHdline">${this.headline}</h4>
      <p style="margin: 0; font-family: 'Archivo', Arial, Helvetica, sans-serif; padding: 20px 10px 20px 10px; font-size: 14px" class="Body">${this.desc}</p>
      <!--Begin BTNPRTNRRD-->
      <table role="presentation" border="0" cellpadding="0" cellspacing="0">
        <tbody>
          <tr>
            <td align="center" valign="middle" bgcolor="#145782" style="-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; padding: 15px 30px 15px 30px;"><div><a href="${this.url}" style="color: #FFFFFF; display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: lighter; text-align: center; text-decoration: none; -webkit-text-size-adjust: none; white-space: nowrap;" class="Fullwidth">${this.cta}</a></div></td>
          </tr>
        </tbody>
      </table>
      <!--End BTNPRTNRRD--> 
    <!--End 1COLTBL-->`
  }

  const finalData = offersData.map(obj => ({ ...obj,
    content: contentContainer
  }))

  const frenchOffer = finalData.filter((offer) => {
    return offer.lang === "f"
  })
  const englishOffer = finalData.filter((offer) => {
    return offer.lang === "e"
  })

  function displayFrench() {
    let a = 0
    const frOffer0 = document.getElementById("froffer0")
    frOffer0.innerHTML = frenchOffer[a++] ? .content()
    const frOffer1 = document.getElementById("froffer1")
    frOffer1.innerHTML = frenchOffer[a++] ? .content()
    const frOffer2 = document.getElementById("froffer2")
    frOffer2.innerHTML = frenchOffer[a++] ? .content()
    const frOffer3 = document.getElementById("froffer3")
    frOffer3.innerHTML = frenchOffer[a++] ? .content()
    const frOffer4 = document.getElementById("froffer4")
    frOffer4.innerHTML = frenchOffer[a++] ? .content()
    const frOffer5 = document.getElementById("froffer5")
    frOffer5.innerHTML = frenchOffer[a++] ? .content()
    const frOffer6 = document.getElementById("froffer6")
    frOffer6.innerHTML = frenchOffer[a++] ? .content()
    const frOffer7 = document.getElementById("froffer7")
    frOffer7.innerHTML = frenchOffer[a++] ? .content()
    const frOffer8 = document.getElementById("froffer8")
    frOffer8.innerHTML = frenchOffer[a++] ? .content()
    const frOffer9 = document.getElementById("froffer9")
    frOffer9.innerHTML = frenchOffer[a++] ? .content()
  }

  function displayEnglish() {
    let i = 0
    const enOffer0 = document.getElementById("enoffer0")
    enOffer0.innerHTML = englishOffer[i++] ? .content()
    const enOffer1 = document.getElementById("enoffer1")
    enOffer1.innerHTML = englishOffer[i++] ? .content()
    const enOffer2 = document.getElementById("enoffer2")
    enOffer2.innerHTML = englishOffer[i++] ? .content()
    const enOffer3 = document.getElementById("enoffer3")
    enOffer3.innerHTML = englishOffer[i++] ? .content()
    const enOffer4 = document.getElementById("enoffer4")
    enOffer4.innerHTML = englishOffer[i++] ? .content()
    const enOffer5 = document.getElementById("enoffer5")
    enOffer5.innerHTML = englishOffer[i++] ? .content()
    const enOffer6 = document.getElementById("enoffer6")
    enOffer6.innerHTML = englishOffer[i++] ? .content()
    const enOffer7 = document.getElementById("enoffer7")
    enOffer7.innerHTML = englishOffer[i++] ? .content()
    const enOffer8 = document.getElementById("enoffer8")
    enOffer8.innerHTML = englishOffer[i++] ? .content()
    const enOffer9 = document.getElementById("enoffer9")
    enOffer9.innerHTML = englishOffer[i++] ? .content()
  }

  displayFrench()
  displayEnglish()
</script>

我在电子邮件开发部门工作，每周都会制作一封电子邮件，其中包含不同的客户报价，我想将其自动化。我得到了一个 excel 工作表，其中包含报价，然后将其转换为 json。电子邮件是使用两列表构建的，每周大约有 4-10 个报价。看起来像这样：

正如您在没有报价的图片中看到的那样，您会收到一条消息，上面写着“未定义”

我一直在尝试编写一段代码，该代码将能够用默认图像替换数组中任何未定义的对象。我附上了我的代码的样子的代码片段。我尝试过很多东西，但没有一个有效，所以我想知道这里是否有人能够为我破解这个问题。

JavaScript HTML 数组对象未定义

2赞 Philipp 6/22/2023

每当你开始将变量命名为、等时，你都应该真正考虑一下使用数组是否更明智。developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/......thing1thing2thing3things[]

答：

1赞 Gohchi 6/23/2023 #1

我试图简化您的代码以使其清晰。

最重要的部分是这个：englishOffer[i]?.content() || 'empty'

基本上，当它超出索引时，它会返回，一个值。因此，运算符将回退到下一个表达式。我放了一个字符串值，但你可以放任何你想要的东西。undefinedfalseyor

const offersData = [{
    "partner": "Partner 1",
    "code": "CODE",
    "lang": "e",
    "headline": "Headline 1",
    "desc": "Description 1",
    "enddate": "ENDDATE",
    "cta": "CTA",
    "url": "URL"
  },
  {
    "partner": "Partner 2",
    "code": "CODE",
    "lang": "e",
    "headline": "Headline 2",
    "desc": "Description 2",
    "enddate": "ENDDATE",
    "cta": "CTA",
    "url": "URL"
  },
  {
    "partner": "Partner 3",
    "code": "CODE",
    "lang": "e",
    "headline": "Headline 3",
    "desc": "Description 3",
    "enddate": "ENDDATE",
    "cta": "CTA",
    "url": "URL"
  },
  {
    "partner": "Partner 4",
    "code": "CODE",
    "lang": "e",
    "headline": "Headline 4",
    "desc": "Description 4",
    "enddate": "ENDDATE",
    "cta": "CTA",
    "url": "URL"
  },
  {
    "partner": "Partner 5",
    "code": "CODE",
    "lang": "e",
    "headline": "Headline 5",
    "desc": "Description 5",
    "enddate": "ENDDATE",
    "cta": "CTA",
    "url": "URL"
  }
]

const contentContainer = function offerContent() {
  return `<!--Begin 1COLTBL--> 
    <!--Begin IMGSML-->
    <div>
      <img class="image" role="presentation"
        src="${this.code}_${this.lang}.png" alt=""
      >
    </div>
    <!--End IMGSML-->
    <br>
    <h4 class="headline">${this.headline}</h4>
    <p class="body">${this.desc}</p>
    <!--Begin BTNPRTNRRD-->
    <table class="card-internal" role="presentation">
      <tbody>
        <tr>
          <td align="center" valign="middle">
            <a href="${this.url}" class="link">${this.cta}</a>
          </td>
        </tr>
      </tbody>
    </table>
    <!--End BTNPRTNRRD--> 
  <!--End 1COLTBL-->`
}

const finalData = offersData.map(obj => ({ ...obj,
  content: contentContainer
}))

const frenchOffer = finalData.filter((offer) => {
  return offer.lang === "f"
})
const englishOffer = finalData.filter((offer) => {
  return offer.lang === "e"
})

function displayEnglish() {
  for (let i = 0; i < 10; i++) {
    const key = "enoffer" + i;
    const element = document.getElementById(key)
    element.innerHTML = englishOffer[i]?.content() || 'empty';
  }
}

displayEnglish()

table.card {
  width: 100%;
  border: 0;
  background-color: #F1F2F2;
  padding: 20px 0px 10px 0px;
}

table.card td {
  padding: 0;
  border-spacing: 0;
}

table.card td.offer {
  background-color: #FFFFFF;
  padding: 20px 0px 20px 0px;
  width: 45%;
}

img.image {
  width: 150px;
  vertical-align: bottom;
  border: 0;
}

.headline {
 font-size: 19px;
 font-family: 'Montserrat', Arial, Helvetica, sans-serif;
 line-height: 24px;
 color: #FFFFFF;
 margin: 0;
 padding: 20px 10px 20px 10px;
 background-color: #6ccbdd;
}

.body {
  margin: 0;
  font-family: 'Archivo', Arial, Helvetica, sans-serif;
  padding: 20px 10px 20px 10px;
  font-size: 14px;
}

table.card-internal {
  border: 0;
}
table.card-internal td {
  border-spacing: 0;
  background-color: #145782;
  -moz-border-radius: 4px; 
  -webkit-border-radius: 4px;
  border-radius: 4px;
  padding: 15px 30px 15px 30px;
}

.link {
  color: #FFFFFF;
  display: inline-block;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: lighter;
  text-align: center; 
  text-decoration: none; 
  -webkit-text-size-adjust: none; 
  white-space: nowrap;
}

<div id="en">
  <table class="card" role="presentation">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td class="offer" align="center" valign="top" id="enoffer0"></td>
        <td width="3%"></td>
        <td class="offer" align="center" valign="top" id="enoffer1"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  
  <table class="card" role="presentation">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td class="offer" align="center" valign="top" id="enoffer2"></td>
        <td width="3%"></td>
        <td class="offer" align="center" valign="top" id="enoffer3"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  
  <table role="presentation">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td class="offer" align="center" valign="top" id="enoffer4"></td>
        <td width="3%"></td>
        <td class="offer" align="center" valign="top" id="enoffer5"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  
  <table class="card" role="presentation">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td class="offer" align="center" valign="top" id="enoffer6"></td>
        <td width="3%"></td>
        <td class="offer" align="center" valign="top" id="enoffer7"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
  
  <table class="card" role="presentation">
    <tbody>
      <tr>
        <td width="3%" class="Hide"></td>
        <td class="offer" align="center" valign="top" id="enoffer8"></td>
        <td width="3%"></td>
        <td class="offer" align="center" valign="top" id="enoffer9"></td>
        <td width="3%" class="Hide"></td>
      </tr>
    </tbody>
  </table>
</div>

1赞 Mwewol 6/23/2023

你太棒了！我已经修改了它以添加我想要的默认图像来代替空图像，它正是我想要的。非常感谢您的帮助。

上一个：如何停止动画

下一个：如何解决 Simulink 中的“端口宽度或尺寸错误”？

将对象数组中的未定义值替换为图像

Replacing undefined value from an array of objects with an image

评论

评论