将 JSON 数组转换为
  • 元素

2024-02-08

我正在 Microsoft Power BI 中创建自定义视觉对象。创建 api 使用 typescript 和 d3 库。我也在使用jquery

我正在尝试创建一个分层树来表示拖入视觉对象的字段。因此树的深度是在运行时决定的,所以它不知道它有多少层。

我已成功将虚拟数据排列到嵌套的 JSON 数组中。

这是我执行 console.log(finalViewModel) 时控制台的屏幕截图

[{ "text": "France","id": 591, "parent": 0, "identity": {long text},
   "nodes"
        [{"text": "Bread", "id", 478, "parent": 591, "identity: {long text}, 
        "nodes" []}, 
        {"text": "Nocco", "id", 498, "parent": 591, "identity: {long text}, 
        "nodes" []}, 
        {"text": "Red Wine", "id", 718, "parent": 591, "identity: {long 
        text}, 
        "nodes" []}]},
   {"text: "Germany", "id" .....so on and so forth

这就是我在控制台中对数据进行 JSON.stringify 时的样子,而且我只使用了 2 个字段,因此不会太混乱。

“身份”:{长文本},不这样显示。标识字段用于 Power BI 选择管理器,因此当单击树中的某些内容时,它将呈现为其他视觉效果。长文本是一个非常长的数组的替代品,该数组保存特定项目标识的信息。

现在问题来了,我想将 JSON 数据转换为 ul 和 li 元素。像这样:

 <ul>
    <li>France</li>
    <ul>
        <li>Baguette</li>
        <li>Nocco</li>
        <li>Red Wine</li>
    </ul>
    <li>Germany</li>
</ul>

我在网上找到了很多此类问题的解决方案,但似乎没有一个能满足我的需求。

谁能帮我编写一个有效的代码片段?

提前致谢


这是一个如何使用纯 JavaScript 实现的演示。

var createSublist = function(container, args) {
  var ul = document.createElement('ul');
  
  for(var j = 0; j < args.length; j++) {
    var row = args[j];
    
    var li = document.createElement('li');
    li.innerText = row.text;
    
    var nodes = row.nodes;
    if(nodes && nodes.length) {
      createSublist(li, nodes);
    }
    
    ul.appendChild(li);
  }
  
  container.appendChild(ul);
};

var data =[  
   {  
      "text":"France",
      "nodes":[  
         {  
            "text":"Bread"
         },
         {  
            "text":"Nocco"     
         }
      ],

   },
   {  
      "text":"Italy",
      "nodes":[  
         {  
            "text":"Pizza"
         },
         {  
            "text":"Wine",
            "nodes": [
              { 
              	"text": "Red"
              },
              { 
              	"text":"White"
              }
            ]
         }
      ]
   }
];

var container = document.getElementsByClassName('container')[0];  
if(container) 
{ 
  createSublist(container, data);
} 
else 
{
  console.log('Container has not been found'); 
}
  
<div class="container">
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 JSON 数组转换为
  • 元素 的相关文章

随机推荐

  • 使用运行时构造函数参数的 InheritanceBasedAopConfigurer

    我有一个由 Spring NET 上下文拥有的 原型 类 它是使用带有运行时构造函数参数的 AutoProxy 创建的 它像这样被实例化 var context ContextRegistry GetContext var myClass
  • 画布清弧

    如何覆盖 HTML5 画布弧 我认为这段代码可以工作 但它在它周围留下了一个边框 尽管事实上它的值完全相同 只是颜色不同 我是否缺少边框属性
  • 我可以重写整个 git 存储库的历史记录以包含我们忘记的内容吗?

    我们最近完成了从 Mercurial 到 Git 的转换 一切都很顺利 我们甚至能够获得使存储库中的所有内容看起来 工作相对正确所需的转换 我们添加了一个 gitignore并开始了 然而 一旦我们合并 使用任何旧的功能分支 我们就会遇到一
  • 给定节点名称,获取另一个节点的子节点

    我有一个像这样的 XML
  • Nuxt async fetch() 创建多个实例?重复调用 fetch()

    我有一个简单的BasePreviewImage需要从内部 API 异步获取 Array Buffer 的组件 然而 看来async fetch 尽管组件本身被破坏 但每个创建的实例都会被调用 Example
  • Django 应用程序中的版本号

    我正在开发一个 Django 应用程序 我想显示应用程序的版本 以便发现错误的人知道应用程序的版本并可以提供更好的错误报告 是否有一种普遍接受的方法来在 Django 中存储版本号 我的意思是我的应用程序的版本 而不是 Django 我一直
  • 如何跟踪表中数据的变化?

    我有一个简单的问题 如何跟踪 SQL Server 表中行的更改 这是我想要的一个例子 Table Users Columns 姓名 地址 用户名 用户类型 Row 1 克里斯托弗 123假街 情人1234 1 我如何跟踪用户将 Chris
  • ctypes 段错误 仅适用于 OSX

    我使用 ctypes 在 Python 中创建了一个非常简单的 C 库绑定 它所做的只是接受一个字符串并返回一个字符串 我在Ubuntu上进行了开发 一切看起来都很好 不幸的是 在 OSX 上完全相同的代码失败了 我完全被难住了 我整理了一
  • PHPExcel 创建/样式/保存 PDF 文档

    我在几个项目中使用 PHPExcel 库 并且喜欢它提供的功能 目前 我需要另存为 PDF 发现 PHPExcel 可以做到这一点 但我发现很难找到有关该过程的一些示例或文档 以下是我找到的链接 http phpexcel codeplex
  • 跟踪 Zaber 设备移动时的位置

    我正在编写一个 LabVIEW VI 来移动 Zaber 线性执行器 并且我想在设备移动时每隔几毫秒记录一次设备的位置 我已经安装了Zaber 的 LabVIEW 驱动程序 http www zaber com wiki Software
  • CloudKit fetchRecordChangesOperation 给出“AppDefaultZone 不支持同步语义”

    我使用 CKFetchRecordChangesOperation 和 CKFetchRecordsChangeToken 来获取更改 它告诉我 AppDefaultZone 不支持同步语义 这是有问题的代码 void downloadSe
  • 混合 Razor 和 Javascript 代码

    我对如何混合 razor 和 js 感到非常困惑 这是我目前坚持的功能
  • 如何处理 Java BigDecimal 中的舍入错误

    我正在与开源项目 axil 合作 该项目在java应用程序内部实现了脚本引擎 并且在尝试利用BigDecimal的舍入时遇到了一个主要的障碍 BigDecimal 似乎正在将我的输入转换为科学记数法 然后将我传递的精度应用于数字的 SN 表
  • 使用 C 编译器选项捕获浮点异常 [关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 Gfortran有得心应手的 ffpe trap编译器选项 但没有类似的选项可用gcc 我隐约意识到他们处理异常的方式不同 但不足以知道为什
  • 在 Firefox 中拖动时,输入类型=范围上的 onchange 事件不会触发

    当我玩的时候
  • 如何将多个注释合并为一个注释?

    我有两个来自框架的注释 我经常在同一字段上使用这两个注释 因此 我试图创建一个包含两者的 组合 注释 但我不知道这是否可能 现有注释 我无法控制 Target ElementType PARAMETER ElementType METHOD
  • 分享 mkmapview 截图

    我有一张地图 上面有很多东西 我想以图片 屏幕截图的形式分享 然而 据我所知 该地图 Apple 的 iOS 6 和 Google 的 iOS 5 均受版权保护 我不能简单地这样做 我想到了 Google Static Maps API 但
  • OpenID Connect 和 IDP 发起的 SSO

    我有一个作为服务提供商的应用程序 是否可以使用 OpenID Connect 实施 Idp 发起的 SSO 对于 Idp 发起的 SSO 来说 似乎只能使用 SAML 对吗 或者有没有办法让 OpenID Connect 也能工作 我正在考
  • Gridview 在 1 列上禁用编辑 asp.net

    我正在使用 gridview 编辑来编辑 gridview 中的值 当我按下编辑时 所有列都可以编辑 我希望不允许编辑其中一列 我有什么办法可以做到这一点吗 这是我的 aspx 代码
  • 将 JSON 数组转换为

    我正在 Microsoft Power BI 中创建自定义视觉对象 创建 api 使用 typescript 和 d3 库 我也在使用jquery 我正在尝试创建一个分层树来表示拖入视觉对象的字段 因此树的深度是在运行时决定的 所以它不知道