Javascript-对象循环和在HTML中组织数据

我试图递归地循环thro对象，并在HTML中以有组织的方式输出数据。下面是我到目前为止所做的，但我现在被卡住了，因为我只能输出行，而不能输出缩进级别。

preview

元素中的示例数据是我尝试执行的操作的输出表示

此外，如果有更好的方法组织/构造数据（通过分组或类似方式），我将非常感谢您的建议

var obj={
0: {
“衬衫”：0，
“牛仔裤”：1，
“品牌”：“Lorem ipsum”
},
1: {
“颜色”：{
“蓝色”：1，
“红色”：0
},
“尺寸”：{
“男人”：{
"小":一,，
“中等”：0，
“大”：0
},
“妇女”：{
"小":一,，
“中等”：1，
“大”：1
}
}
},
2: {
“航运”：{
“过夜”：“$10”，
“3天”：“4美元”
}
},
3: {
“股票”：{
“男人”：[
{
“绿色牛仔裤”：13，
“绿衬衫”：17，
“绿鞋”：21
},
{
“黑色牛仔裤”：1，
“黑衬衫”：12，
“黑鞋”：53
}
],
“妇女”：[
{
“绿色牛仔裤”：2，
“绿衬衫”：53，
“绿鞋”：11
},
{
“黑色牛仔裤”：6，
“黑衬衫”：22，
“黑鞋”：29
}
]
}
}
}
var dataEl=document.getElementById（'data'）；
var getProperties=函数（obj）{
for（obj中的var属性）{
如果（！obj.hasOwnProperty（property））继续；
if（obj.hasOwnProperty（property）&&obj[property]！==null）{
if（obj[property].constructor==Object）{
dataEl.innerHTML+=''+属性+''；
getProperties（对象[property]）
}else if（obj[property].constructor==Array）{
dataEl.innerHTML+=''+属性+''；
对于（var i=0；i
#数据，
#预演{
显示：块；
宽度：80%；
字体大小：12px；
字体系列：Arial，Helvetica；
填充：10px；
}
#数据行，
#预览。行{
显示：内联块；
宽度：100%；
边缘底部：2px；
}
#data.row.title，
#preview.row.title{
字体大小：粗体；
字体大小：14px；
}
#data.row.indent-1，
#preview.row.indent-1{
左侧填充：20px；
}
#data.row.indent-2，
#preview.row.indent-2{
左侧填充：40px；
}

衬衫：0件
牛仔裤：1件
品牌：Lorem ipsum
颜色
蓝色：1
红色：0
大小
人
小型：1
中等：0
大号:0
女人
小型：1
中等：1
大型：1
航运
过夜：10美元
3天：4美元
股票
人
绿色牛仔裤：13
绿衬衫：17件
绿鞋：21
黑色牛仔裤：1
黑色衬衫：127
黑色鞋子：53
女人
绿色牛仔裤：2件
绿衬衫：53
绿鞋：11
黑色牛仔裤：6
黑色衬衫：22
黑色鞋子：29
当您使用递归函数构建html时，与其直接将结果字符串追加到元素中，不如将其存储到变量中，并在函数完成后返回，这使得将结果封装在分组元素中变得更加容易-请参阅与源对象兼容的示例方法：

function getProperties(obj, depth) {
  depth = depth === undefined ? 0 : depth + 1;
  var html = '';

  // first handle arrays
  if (obj && obj.forEach) {
    html += '<div class="list" data-indent="' + depth + '">';
    obj.forEach(function (elems, index) {
      html += '<div class="item ' + (index % 2 ? 'even' : 'odd') + '" data-index"' + index + '">'
        + getProperties(elems, depth)
        + '</div>';
    });
    html += '</div>';
  }
  // the main block (comes after arrays as an array would pass this condition too)
  else if (obj && typeof obj === 'object') {
    // uncomment if you'd like the whole group enclosed in a parent:
    // if (depth === 0) html += '<div class="group">';
    Object.keys(obj).forEach(function (key) {
      html += '<div class="row" data-indent="' + depth + '">';
      if (depth > 0)
        html += '<span class="title">' + key + '</span>'
      html += getProperties(obj[key], depth)
      html += '</div>';
    });
    // if (depth === 0) html += '</div>';
  }
  // else the object is just a value
  else {
    html += '<span class="value">' + obj + '</span>';
  }

  return html;
}

document.getElementById('data').innerHTML = getProperties(obj);

（自定义属性的
data-
前缀需要使其与HTML验证程序兼容。）
当您使用递归函数进行HTML构造时，与其将结果字符串直接附加到元素中，不如将其存储到变量中，并在函数完成后返回，这使得将结果封装在分组元素中变得更加容易-请参阅与源对象兼容的示例方法：

function getProperties(obj, depth) {
  depth = depth === undefined ? 0 : depth + 1;
  var html = '';

  // first handle arrays
  if (obj && obj.forEach) {
    html += '<div class="list" data-indent="' + depth + '">';
    obj.forEach(function (elems, index) {
      html += '<div class="item ' + (index % 2 ? 'even' : 'odd') + '" data-index"' + index + '">'
        + getProperties(elems, depth)
        + '</div>';
    });
    html += '</div>';
  }
  // the main block (comes after arrays as an array would pass this condition too)
  else if (obj && typeof obj === 'object') {
    // uncomment if you'd like the whole group enclosed in a parent:
    // if (depth === 0) html += '<div class="group">';
    Object.keys(obj).forEach(function (key) {
      html += '<div class="row" data-indent="' + depth + '">';
      if (depth > 0)
        html += '<span class="title">' + key + '</span>'
      html += getProperties(obj[key], depth)
      html += '</div>';
    });
    // if (depth === 0) html += '</div>';
  }
  // else the object is just a value
  else {
    html += '<span class="value">' + obj + '</span>';
  }

  return html;
}

document.getElementById('data').innerHTML = getProperties(obj);

（定制属性的
data-
前缀需要使其与HTML验证程序兼容。）
您看起来像这样吗？只是为了漂亮地打印JSON？不，我需要在html中表示它，这样我才能操纵设计。你看起来像这样吗？只是为了漂亮地打印JSON？不，我需要在html中表示它，这样我就可以操纵设计了。首先将它们存储在变量中更有意义。感谢您的解释和伟大的解决方案！首先将它们存储在变量中更有意义。感谢您的解释和伟大的解决方案！