Question

所以我将从我的需求开始。我有一个任务是使用ul列表中的nightwatch.js创建json输出，其中内部列表是几个div元素，其中包含名称，姓氏等类...但实际上我无法想到任何解决方案。这是我的HTML

    <html>
<meta charset="utf-8">
<body>
<ul class="random">
    <li class="list">
        <div class="name">John</div>
        <div class="surname">Lewis</div>
    </li>

    <li class="list odd">
        <div class="name">Nick</div>
        <div class="surname">Kyrgios</div>
    </li>

</ul>
</body>
</html>

这是我的nightwatch.js脚本

'Test' : function(browser) {

    function iterate(elements) {
      elements.value.forEach(function(el) {
        browser.elementIdText(el.ELEMENT, function(r) {

         browser.elementIdAttribute(el.ELEMENT, 'class', function(att){

          // output for json i guess

           console.log(att.value + ' => ' + r.value) 

         })

        });
      });
    }

    browser
      .url('http://url.com/nightwatch.php')
      .waitForElementVisible('body', 8000)
      .elements('css selector', 'ul li div', iterate)
      .end();
  }

基本上这将执行以下操作：

name =＆gt;约翰
surname =＆gt;路易斯
name =＆gt;尼克
surname =＆gt; Kyrgios

输出是两个字符串......

我怎样才能像

[{name: "John", surname: "Lewis"}, {name: "Nick", surname: "Kyrgios"}]

Answer 1

这应该有效。您只需要跟踪对象并将其放在列表中的数组内。

function iterate(elements) {
  var objArr = [];
  var obj = {};
  elements.value.forEach(function(el, idx) {
    browser.elementIdText(el.ELEMENT, function(r) {

     browser.elementIdAttribute(el.ELEMENT, 'class', function(att){

       if (obj.hasOwnProperty(att.value)) {
         objArr.push(obj);
         obj = {};
       }
       obj[att.value] = r.value;
     });

    });
    if (idx === (elements.value.length-1)) {
      objArr.push(obj);
      console.log(objArr);
    }
  });
}

Answer 2

与Will的解决方案一样，我使用了直接的JavaScript。似乎nightwatch.js代码没有提供任何显着的好处。此外，您的问题并未指定只应使用nightwatch.js。

与Will相反，我假设内部class元素上的<div>可以是任意的，并且任意类应该用作该条目的对象上的键/属性。选择使用此方法与仅将其限制为name或surname属性将取决于您的HTML实际是什么，以及您希望如何处理不是这两个字符串的类。

＆＃13;

var theList = [];
var listItems = document.querySelectorAll('li');
for (var itemIndex=0,itemLength=listItems.length; itemIndex < itemLength; itemIndex++) {
  var entry = {};
  divs = listItems[itemIndex].querySelectorAll('div');
  for (var divsIndex=0, divsLength=divs.length; divsIndex < divsLength; divsIndex++) {
    entry[divs[divsIndex].className] = divs[divsIndex].textContent;
  }
  theList.push(entry);
}
outputJson = JSON.stringify(theList);

console.log(outputJson);

＆＃13;

<html>
<meta charset="utf-8">

<body>
  <ul class="random">
    <li class="list">
      <div class="name">John</div>
      <div class="surname">Lewis</div>
    </li>

    <li class="list odd">
      <div class="name">Nick</div>
      <div class="surname">Kyrgios</div>
    </li>

  </ul>
</body>

</html>

＆＃13;

Answer 3

这样的事情怎么样？

  function iterate(elements) {
      var jsonArray = [];
      var jsonBuffer = "";
      elements.value.forEach(function(el) {
        browser.elementIdText(el.ELEMENT, function(r) {

         browser.elementIdAttribute(el.ELEMENT, 'class', function(att){

          // output for json i guess

          if (att.value == 'name') {
            jsonBuffer += "{" + att.value + ":" + "" + r.value + "" + ",";
          }
          else {
            jsonBuffer += att.value + ":" + "" + r.value + "" + "}";
            jsonArray.push(jsonBuffer);
            jsonBuffer = "";
          }

         })

        });
      });
      var jsonOutput = "[";
      var i = 0;
      jsonArray.forEach(function(el) {
        if (i < jsonArray.length) {
          jsonOutput += el + ",";
        } else {
          jsonOutput += el + "]";
        }
        i++;
      }
    }

Answer 4

我不熟悉Nightwatch，但你基本上会遍历这些元素并将它们推到一个阵列上。

＆＃13;

var results = [];
var entries = document.querySelectorAll('li');

for (var ix = 0; ix < entries.length; ix++) {
    var name = entries[ix].querySelector('.name').innerText;
    var surname = entries[ix].querySelector('.surname').innerText;
    results.push({
        name: name,
        surname: surname
    });
}

console.log(results);

＆＃13;

<ul class="random">
    <li class="list">
        <div class="name">John</div>
        <div class="surname">Lewis</div>
    </li>
    <li class="list odd">
        <div class="name">Nick</div>
        <div class="surname">Kyrgios</div>
    </li>
</ul>

＆＃13;

Javascript从两个字符串创建json对象

4 个答案: