将一个对象分成更小的对象答案

【问题标题】：Separate an object into smaller objects将一个对象分成更小的对象
【发布时间】：2021-03-26 08:28:10
【问题描述】：

const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
const options = ["iframe"]
const url = 'https://www.loungeincomfort.com.au/'
const page = await browser.newPage();
await page.goto(url);
for (var i = 0; i < options.length; i++) {
    const frame = await page.$$eval(options[i], e => e.map(a => {
        const attrs = a.getAttributeNames();
        const len = attrs.length;
        const test = {};
        for (var i = 0; i < len; i++) {
            //test[attrs[i]].push({ label: "Hello World" })
            test[attrs[i]] = a.getAttribute(attrs[i])
        }
        return test;
    }))
    console.log(frame);
}
await browser.close();
})();

输出是这样的：

[{
    "width": "1170",
    "height": "490",
    "style": "visibility: visible; width: 100%; margin-left: 0px; height: 301.538px; margin-top: -3.26923px; position: absolute;"
}]

我想将样式输出分离成对象，就像这样

我对此进行了一些研究，但找不到任何有用的东西

[{
    "width": "1170",
    "height": "490",
    "style": {
           "visibility": "visible",
           "width": "100%",
           "margin-left": "0px",
           "height": "301.538px",
           "margin-top": "-3.26923px",
            "position": "absolute"

}}]

如果可能的话，我希望你能帮我解决这个问题在此先感谢:)

【问题讨论】：

标签： javascript node.js json object puppeteer

【解决方案1】：

让我们试试这个：

let s = "visibility: visible; width: 100%; margin-left: 0px; height: 301.538px; margin-top: -3.26923px; position: absolute;"

let res = Object.fromEntries(s.split(';').map(item => item.split(':').map(subitem => subitem.trim())))

【讨论】：

【解决方案2】：

data = [{
  "width": "1170",
  "height": "490",
  "style": "visibility: visible; width: 100%; margin-left: 0px; height: 301.538px; margin-top: -3.26923px; position: absolute;"
}];
//console.log(data);
data.map(
  (item) => {
  // use a tmp variable to replace the style 
  const tmp = item.style;
  item.style={};
  tmp
  // split the style string into an array
  .split(';')
  // split individual items into keyvalue array
  .map((keyvalue) => keyvalue.split(':')
  // trim key and value
  .map(item=>item.trim()))
  // remove invalid values
  .filter((keyvalue)=>keyvalue.length===2)
  // assign to style
  .map((keyvalue)=>{item.style[keyvalue[0]]=keyvalue[1]})
  return item;
  }
)
console.log(data)

结果

[
  {
    "width": "1170",
    "height": "490",
    "style": {
      "visibility": "visible",
      "width": "100%",
      "margin-left": "0px",
      "height": "301.538px",
      "margin-top": "-3.26923px",
      "position": "absolute"
    }
  }
]

【讨论】：

【解决方案3】：

对于您拥有的数据类型，这将起作用：

Object.fromEntries(style.split('; ').map( item => item.split(': ')))

测试：

const style = "visibility: visible; width: 100%; margin-left: 0px; height: 301.538px; margin-top: -3.26923px; position: absolute;"
const styleObj = Object.fromEntries(style.split('; ').map( item => item.split(': ')));
// use styleObj

结果：

【讨论】：

你的回答确实解决了我的问题，但它不适用于我上面的代码
我的意思是我得到这个错误 UnhandledPromiseRejectionWarning: Error: Evaluation failed: TypeError: Cannot read property 'split' of undefined
@MohamedEssam 哦，我明白了！好吧，所以这意味着您的数据并不总是像您想象的那样。'split' 是 String 的函数。也许在拆分之前添加验证？我的意思是 - 在拆分之前检查值不为空。