使用 JavaScript 有条件地在 HTML 中渲染数据

本文将介绍如何使用 JavaScript 动态地在 HTML 中渲染对象属性，并根据属性值是否存在来决定是否显示它们。我们将探讨一种更简洁的方法，避免冗余的代码，提高代码的可维护性和可读性。通过使用对象键值对和数组方法，可以有效地处理条件渲染的需求。

动态渲染对象属性

在Web开发中，经常需要根据数据动态生成HTML内容。当数据对象包含可选属性时，我们可能希望只显示那些存在的属性。下面我们将介绍一种更简洁的方法来实现这一目标。

假设我们有一个包含方向信息的对象：

let dirs = { nord: 10, est: 19, sudouest: 5 };

我们希望将这些方向信息以“标签: 值”的形式显示在HTML中，但只显示那些值不为null或undefined的属性。

立即学习“Java免费学习笔记（深入）”；

更简洁的实现方法

避免使用大量的条件判断和重复的代码，我们可以利用JavaScript的对象和数组方法来简化实现。

ReportPlus数据报表中心小程序

ReportPlust意在打造一套精美的数据报表模板，里面高度封装日历组件、表格组件、排行榜组件、条形进度条组件、文本块组件以及ucharts的多个图表组件，用户只需要按照虚拟数据的格式，传特定数据即可方便、快捷地打造出属于自己的报表页面。该小程序主要使用了ucharts和wyb-table两插件实现的数据报表功能。 特点使用的是uni-app中最受欢迎的图表uCharts插件完成图表展示，该插件

下载

首先，创建一个翻译对象，将属性名映射到更友好的显示名称：

const translations = {
  nord: 'Nord',
  sud: 'Sud',
  ouest: 'Ouest',
  est: 'Est',
  sudouest: 'Sud-ouest',
  sudest: 'Sud-est',
  nordouest: 'Nord-ouest',
  nordest: 'Nord-est'
}

然后，使用Object.entries()方法将对象转换为键值对数组，并使用map()方法遍历该数组，为每个键值对生成HTML字符串。

function print_directions(dirs) {
  const translations = {
    nord: 'Nord',
    sud: 'Sud',
    ouest: 'Ouest',
    est: 'Est',
    sudouest: 'Sud-ouest',
    sudest: 'Sud-est',
    nordouest: 'Nord-ouest',
    nordest: 'Nord-est'
  }

  const html = Object.entries(dirs)
    .map(([dir, value]) =>
      `

        ${translations[dir] || dir}:
        ${value}
      
`
    )
    .join('');
  document.querySelector(".content").innerHTML = html;
}

let dirs = { nord: 10, est: 19, sudouest: 5 };
print_directions(dirs);

在这个代码中：

• Object.entries(dirs)将dirs对象转换为一个数组，其中每个元素都是一个包含键和值的数组，例如[['nord', 10], ['est', 19], ['sudouest', 5]]。
• map(([dir, value]) => ...)遍历这个数组，为每个键值对生成一个HTML字符串。
• translations[dir] || dir使用翻译对象来获取方向的显示名称。如果翻译对象中不存在该方向的名称，则使用原始的属性名。
• join('')将所有生成的HTML字符串连接成一个字符串。
• 最后，将生成的HTML字符串插入到.content元素中。

示例代码

完整的示例代码如下：

注意事项

• 确保translations对象包含了所有可能出现的属性名，或者在代码中处理未知的属性名。
• 可以根据需要修改HTML结构和样式。
• 如果需要处理更复杂的数据类型，可能需要修改map()方法中的逻辑。

总结

通过使用对象键值对和数组方法，我们可以更简洁地实现条件渲染的需求，避免冗余的代码，提高代码的可维护性和可读性。这种方法适用于各种需要根据数据动态生成HTML内容的场景。