【问题标题】:Nested objects' key is missing after it is formatted and rendered嵌套对象的键在格式化和渲染后丢失
【发布时间】:2019-11-30 21:52:59
【问题描述】:

我有这个对象,我一直试图在没有对象语法的情况下在我的 ejs 模板中打印它。我在 StackOverflow 中遵循了一个答案,并且在没有语法的情况下成功打印了它,但它没有打印嵌套对象中的所有内容。我的意思是数据中有两个嵌套对象(f 和 g)。因此,输出中缺少那些嵌套对象(如姓名、电子邮件、电话、国家/地区、汽车)中的属性(键)。我怎样才能用他们尊重的价值观来呈现它?

这是我用来格式化它的对象和代码:

router.get("/", async(req, res) => {
    try{
        let data = { 
                a: 'Tesla',
                b: 'Mclaren',
                c: 'Ferrari',
                d: 'Lamborghini',
                e: 'Lotus',
                'f':{ 
                    name: 'John',
                    'e-mail': 'xyz@example.com',
                    phone: '+12345678',
                    country: 'USA',
                    car: 'Toyota Prius' 
                },
                'g':{ 
                    name: 'Sophie',
                    'e-mail': 'xyz@example.com',
                    phone: '+12345678',
                    country: 'UK',
                    car: 'Nissan Bluebird' 
                },
                h: 'Volkswagen',
                i: 'Bugatti',
                j:[ 
                    '% mileage',
                    '% top speed',
                    '% suspension',
                    '% navigation',
                    '% horsepower',
                    '% 0-60s' 
                ] 
            }
            var result = Object.entries(data).reduce((result, [key, value]) => {
                key = key.replace(/([A-Z]|\d+)/g, ' $1').replace(/^(.)/, (unused, p1) => p1.toUpperCase());
                if (!['string', 'number', 'boolean'].includes(typeof value)) {
                    value = Object.entries(value).map(([key, value]) => (typeof value == 'boolean') ? (value ? key : undefined) : value).filter(v => v !== undefined).join(',');
                }
                result.push(`${key}: ${value}`);
                return result;
            }, []);
            var finalData = result.join('\n');
            res.render("data", {data: finalData});
    }catch(e){
        req.flash("error", "Unable to retrieve data. Please try again!");
        res.redirect("/");
    }
});

这是我在控制台打印出来的结果:

A: Tesla
B: Mclaren
C: Ferrari
D: Lamborghini
E: Lotus
F: John,xyz@example.com,+12345678,USA,Toyota Prius
G: Sophie,xyz@example.com,+12345678,UK,Nissan Bluebird
H: Volkswagen
I: Bugatti
J: % mileage,% top speed,% suspension,% navigation,% horsepower,% 0-60s

这是我在我的 ejs 模板中渲染后的结果:

A: Tesla B: Mclaren C: Ferrari D: Lamborghini E: Lotus F: John,xyz@example.com,+12345678,USA,Toyota Prius G: Sophie,xyz@example.com,+12345678,UK,Nissan Bluebird H: Volkswagen I: Bugatti J: % mileage,% top speed,% suspension,% navigation,% horsepower,% 0-60s

预期结果:

A: Tesla
B: Mclaren
C: Ferrari
D: Lamborghini
E: Lotus
F: 
Name: John
Email: xyz@example.com
Phone: +12345678
Country: USA 
Car: Toyota Prius
G: 
Name: Sophie
Email: xyz@example.com
Phone: +12345678
Country: UK
Car: Nissan Bluebird
H: Volkswagen
I: Bugatti
J: 
% mileage
% top speed
% suspension
% navigation
% horsepower
% 0-60s

【问题讨论】:

    标签: javascript node.js object ejs


    【解决方案1】:

    这不漂亮,但应该做的事情:

    var result = Object.entries(data).reduce((result, [key, value]) => {
       key = key.toUpperCase();
       if (typeof value === 'object') {
         result.push(`${key}:`);
         if (Array.isArray(value)) {
           value.forEach(item => result.push(item));
         } else {
           Object.entries(value).forEach(([key, value]) => {
             key = key.charAt(0).toUpperCase() + key.slice(1)
             result.push(`${key}: ${value}`);
           })
        } 
      } else {
        result.push(`${key}: ${value}`);
      }
      return result;
    }, []);
    var finalResult = result.join("\n");
    

    【讨论】:

    • 嗨。非常感谢你帮助我。我试过你的代码,我可以在我的模板中渲染它,但有一个小问题。在我的模板上渲染后,所有项目都被包裹在几行中。有什么办法可以在新行上呈现每个项目?
    • 嗨,我编辑了我的答案,增加了 1 行代码(用于将数组连接到字符串),希望对您有所帮助:)
    • 嗯,恐怕我对EJS不熟悉。这有什么帮助吗? github.com/tj/ejs/issues/187 您可能需要将结果数组与 "<br>" 或其他东西连接起来,然后将文本呈现为 HTML。
    • 我想我找到了问题所在。我将数组中的所有项目呈现为简单的文本。所以它们被包裹在一行中。所以我在模板中尝试了一个循环,并为每个项目使用了<li>。它们显示在列表中。我应该感谢你的代码。这是完美的。非常感谢。
    • 当然——现在你有一个字符串数组,你需要的是一个对象数组。因此,将result.push(...) 替换为result.push({ key, value }) 之类的东西,然后您可以在前端分别处理键和值。
    【解决方案2】:

    添加到上述答案使用join 以获得正确的预期结果。

    let data = { 
                    a: 'Tesla',
                    b: 'Mclaren',
                    c: 'Ferrari',
                    d: 'Lamborghini',
                    e: 'Lotus',
                    'f':{ 
                        name: 'John',
                        'e-mail': 'xyz@example.com',
                        phone: '+12345678',
                        country: 'USA',
                        car: 'Toyota Prius' 
                    },
                    'g':{ 
                        name: 'Sophie',
                        'e-mail': 'xyz@example.com',
                        phone: '+12345678',
                        country: 'UK',
                        car: 'Nissan Bluebird' 
                    },
                    h: 'Volkswagen',
                    i: 'Bugatti',
                    j:[ 
                        '% mileage',
                        '% top speed',
                        '% suspension',
                        '% navigation',
                        '% horsepower',
                        '% 0-60s' 
                    ] 
                }
    var result = Object.entries(data).reduce((result, [key, value]) => {
       key = key.toUpperCase();
       if (typeof value === 'object') {
         result.push(`${key}:`);
         if (Array.isArray(value)) {
           value.forEach(item => result.push(item));
         } else {
           Object.entries(value).forEach(([key, value]) => {
             key = key.charAt(0).toUpperCase() + key.slice(1)
             result.push(`${key}: ${value}`);
           })
        } 
      } else {
        result.push(`${key}: ${value}`);
      }
      console.log(result.join("\n"))
      return result.join("\n");
    }, []);
    

    【讨论】:

    • 嗨。非常感谢你帮助我。我尝试了您的代码,但没有得到任何输出。模板显示我的错误处理程序,终端只显示 A: Tesla。
    • join() 不应在 reduce() 内调用。在函数之后,您可以像在原始示例中一样执行 var finalData = result.join('\n'); :)
    猜你喜欢
    • 1970-01-01
    • 2017-05-19
    • 1970-01-01
    • 2022-01-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-11
    相关资源
    最近更新 更多