JavaScript 通过input.value从嵌套对象提取对应键值实现渲染

你当前的代码逻辑完全传错了遍历目标：company是从input拿到的字符串，对字符串调用Object.keys()，本身就会返回字符串每个字符的索引数组，这就是控制台输出0到7的原因，根本没走到你要读取嵌套prices对象的流程里。
另外原代码中btnSearch未做DOM获取，运行时会直接报引用错误，需要先把搜索按钮的DOM节点取到才能绑定点击事件。

• 用输入框拿到的公司名，先从外层prices对象中取出对应公司的嵌套数据，需要做空值兼容，避免用户输入不存在的公司名时抛出undefined错误。
• 对取出的公司级数据对象调用Object.keys()，得到的就是该公司下所有的foil属性键值（foil1、foil2等）。
• 把整理好的foil信息赋值给.score元素完成展示，可以按需选择只展示foil名称，或是连带展示对应的分段价格。

// 补全所有需要绑定的DOM节点，选择器请和你页面实际结构匹配
const input = document.querySelector('input');
const score = document.querySelector('.score');
const btnSearch = document.querySelector('#btnSearch'); // 对应你页面上的搜索按钮

const prices = {
    'company1': {
        'foil1': {
            '0-5000m2' : 0.67,
            '5000-10000m2' : 0.65,
            '10000-20000m2' : 0.63
        },
        'foil2': {
            '0-5000m2' : 0.67,
            '5000-10000m2' : 0.65,
            '10000-20000m2' : 0.63
        },
        'foil': {
            '0-5000m2' : 0.67,
            '5000-10000m2' : 0.65,
            '10000-20000m2' : 0.63
        }
    }
}

btnSearch.addEventListener('click',()=>{
    const companyName = input.value.trim();
    // 从外层对象中匹配对应公司的数据
    const companyData = prices[companyName];

    // 空值兼容：未查询到对应公司时给出提示
    if(!companyData) {
        score.innerHTML = '未查询到该公司对应的foil相关数据';
        return;
    }

    // 正确提取foil相关的键值
    const foilKeys = Object.keys(companyData);
    console.log(foilKeys); // 输出结果为 ["foil1", "foil2", "foil"]

    // 方式1：仅展示foil名称，效果为score区域直接展示"foil1、foil2、foil"
    // score.textContent = `关联foil数据：${foilKeys.join('、')}`;

    // 方式2：连带展示每个foil对应的分段价格
    const renderContent = foilKeys.map(foilName => {
        const priceDetail = Object.entries(companyData[foilName])
            .map(([range, price]) => `${range}：${price}`)
            .join('<br>');
        return `<div>${foilName}<br>${priceDetail}</div><hr>`;
    }).join('');
    score.innerHTML = renderContent;
})

内容的提问来源于stack exchange，提问作者Anlaki