时间戳

首页 > 解决方案 > 动态添加对象到对象

javascript - 动态添加对象到对象

问题描述

我有let prodObject = {schema: {}}; 而且我有 ul 列表

        <ul class="product-lists">
            <li>CD Covers</li>
            <li>DVD Covers</li>
            <li>Cards</li>
            <li>Posters</li>
            <li>Cups</li>
        </ul>

我想为 prodObject.schema 对象的列表中的每个项目添加对象。我希望最终对象看起来像这样。

                schema: {
                    cdCovers: { 
                        type: 'string',
                        title: 'CD Covers',
                    },
                    dvdCovers: { 
                        type: 'string',
                        title: 'DVD Covers',
                    },
                    cards: { 
                        type: 'string',
                        title: 'Cards',
                    }, 
                    posters: { 
                        type: 'string',
                        title: 'Posters',
                    },
                    cups: { 
                        type: 'string',
                        title: 'Cups',
                    },  
                }
            };```

标签： javascriptobjectjavascript-objects

解决方案

这有两个部分。使用querySelectorAll选择所有元素，然后使用replace、toLowerCase和toUpperCase将对象键的标题转换为 camelCase ：

const prodObject = {schema:{}};

Array.from( document.querySelectorAll( '.product-lists li' ), el => el.innerText ).forEach( title => {
  const camelCaseTitle = title.replace( /^\w*/, x => x.toLowerCase( ) ).replace( /\s+(\w)(\w*)/, (_,f,r) => f.toUpperCase() + r.toLowerCase( ) );
  prodObject.schema[ camelCaseTitle ] = { type: 'string', title };
} );

console.log( prodObject );
.product-lists {
  display: none;
}
<ul class="product-lists">
    <li>CD Covers</li>
    <li>DVD Covers</li>
    <li>Cards</li>
    <li>Posters</li>
    <li>Cups</li>
</ul>

推荐阅读