使用递归，如何迭代对象以生成HTML？

我试图递归地对key:values对象进行排序。至少在控制台上，这似乎是可行的。代码获取对象并迭代键值对。如果它找到另一个对象，它会调用自己来迭代该对象。我遇到的问题是，后续调用似乎不会生成任何html，但它会在控制台中显示键值对。这是我第一次尝试递归，我不确定这是我声明变量的方式，还是我在递归的工作原理中遗漏了什么

$(document).ready(function(){
let conditionReport = {
    weekNo:"5",
    laps:"8",
    heat:"6",
    feature:"9",
    tireSize:
        {lf:"15",lr:"16",rf:"16.5",rr:"17"},
    airPressure:
        {lf:"8",lr:"10",rf:"12",rr:"16"},
    tireTemperature:
        {lf:"9",lr:"11",rf:"13",rr:"15"},
    suspensionAdjustment:
        {lf:"4",lr:"5",rf:"6",rr:"7"},
    engineRPM:"2000",
    trackCondition:"4",
    damage2car:"3",
    suspensionAdjustment2:
        {upper:
            {lf:"4",lr:"5",rf:"6",rr:"7"},
        lower:
            {lf:"4",lr:"5",rf:"6",rr:"7"},
        },
    notes:"note 3"
}

s = x => document.getElementById(x);

const isObject = val => (typeof val === "object") ? true : false;

const getKeyValue = (obj) => {
    let html = '<ul>';
    for(let key in obj) {
        let value = obj[key]
        if(!isObject(value)){
            //console.log(isObject(value));
            console.log(key + ":" + value);
            html += '<li>' + key + ":" + value + "</li>";
        }
        else{
            if(isObject(value)){
                //console.log(isObject(value));
                console.log(key + "=>");
                getKeyValue(value);
                html += '<li>' + key + ":"+ "</li>";
            }
        }
    }
    html += "</ul>";
    s('cards').innerHTML = html;
}

getKeyValue(conditionReport);

});

$（文档）.ready（函数（）{
让条件报告={
weekNo：“5”，
圈数：“8”，
热火：“6”，
专题:"九"，
疲劳：
{lf:“15”，lr:“16”，rf:“16.5”，rr:“17”}，
气压：
{lf:“8”、lr:“10”、rf:“12”、rr:“16”}，
轮胎温度：
{lf:“9”、lr:“11”、rf:“13”、rr:“15”}，
暂停调整：
{lf:“4”，lr:“5”，rf:“6”，rr:“7”}，
引擎PM:“2000”，
轨道条件：“4”，
损坏2卡：“3”，
暂停调整2：
{上：
{lf:“4”，lr:“5”，rf:“6”，rr:“7”}，
下：
{lf:“4”，lr:“5”，rf:“6”，rr:“7”}，
},
注：“注3”
}
s=x=>document.getElementById（x）；
const isObject=val=>（typeof val==“object”）？真：假；
常量getKeyValue=（obj）=>{
让html=“
”；
用于（输入obj）{
let value=obj[key]
如果（！isObject（值））{
//控制台日志（isObject（值））；
console.log（键+”：“+值）；
html+='
'+key+“：“+value+”
”；
}
否则{
if（等值对象（值））{
//控制台日志（isObject（值））；
console.log（键+“=>”）；
getKeyValue（值）；
html++='
'+key+“：“+”
”；
}
}
}
html+=“
”；
s（'cards'）。innerHTML=html；
}
getKeyValue（条件报告）；
});

使用返回值：

const getKeyValue = (obj) => {
    let html = '<ul>';
    for (let key in obj) {
        let value = obj[key]
        if (!isObject(value)) {
            html += '<li>' + key + ":" + value + "</li>";
        } else {
            var innerValue = getKeyValue(value);
//          ^^^^^^^^^^^^^^^^
            html += '<li>' + key + ":"+ innerValue + "</li>";
//                                      ^^^^^^^^^^
        }
    }
    html += "</ul>";
    return html;
//  ^^^^^^
}

使用返回值：

const getKeyValue = (obj) => {
    let html = '<ul>';
    for (let key in obj) {
        let value = obj[key]
        if (!isObject(value)) {
            html += '<li>' + key + ":" + value + "</li>";
        } else {
            var innerValue = getKeyValue(value);
//          ^^^^^^^^^^^^^^^^
            html += '<li>' + key + ":"+ innerValue + "</li>";
//                                      ^^^^^^^^^^
        }
    }
    html += "</ul>";
    return html;
//  ^^^^^^
}

---

为什么每次调用getKeyValue（）时都要设置innerHTML？您是否意识到，如果您将其设置100次，那么最后只显示最后一个值？我认为您的函数必须将“html”的值返回给调用者，调用者应该将其与其余值连接起来，然后再次递归返回。简单的解决方案是：创建一个全局变量CONSOLE并替换每个

CONSOLE.log（x）带有
控制台+=x最后，调用
s（'cards'）。innerHTML=CONSOLE@IvanKuckir简单但可怕。@Bergi这次静默不是为了解决问题。我们必须通过小步骤帮助OP理解编程。在学习过程中，您理解的丑陋解决方案比您不理解的“平滑”解决方案要好。为什么在每次调用getKeyValue（）时都设置innerHTML？您是否意识到，如果您将其设置100次，那么最后只显示最后一个值？我认为您的函数必须将“html”的值返回给调用者，调用者应该将其与其余值连接起来，然后再次递归返回。简单的解决方案是：创建一个全局变量CONSOLE并替换每个
CONSOLE.log（x）带有
控制台+=x最后，调用
s（'cards'）。innerHTML=CONSOLE@IvanKuckir简单但可怕。@Bergi这次静默不是为了解决问题。我们必须通过小步骤帮助OP理解编程。在学习过程中，一个丑陋的解决方案，你理解，比一个“平滑”的解决方案，你不理解要好。谢谢。我想当调用发生在else语句中时，它会传递if语句并更新html变量。我还不清楚为什么。有人知道我可以研究什么来解释这个模型吗？你说的“它会通过if语句”是什么意思？请注意，
html
是一个用
let
声明的局部变量，因此每个调用——也就是说每个递归调用——都有自己的变量。我认为递归调用将通过整个函数重新运行，当它到达if语句时，html变量将被更新。我想我明白你的意思了，这是一个全新的函数调用，该调用中的每个变量仅在该实例中具有局部作用域。谢谢。我想当调用发生在else语句中时，它会传递if语句并更新html变量。我还不清楚为什么。有人知道我可以研究什么来解释这个模型吗？你说的“它会通过if语句”是什么意思？请注意，
html
是一个用
let
声明的局部变量，因此每个调用——也就是说每个递归调用——都有自己的变量。我认为递归调用将通过整个函数重新运行，当它到达if语句时，html变量将被更新。我想我明白你的意思了，这是一个全新的函数调用，调用中的每个变量只在该实例中具有局部作用域。