Displaying the result in Console line by line

Question

I have a program that uses json and ajax. When I click the OK button it will display the result in the console Instead of displaying it on the console log, in one line, it needs to be display line per line i tried using the encode function but it still doesn't work.

the siblings should be display on the first page's console here's my code

  <script type="text/javascript">

kyu = (function (document, window, kyu) {   
  var node = Node.prototype,
      nodeList = NodeList.prototype,
      forEach = 'forEach',
      trigger = 'trigger',
      each = [][forEach], 
      dummy = document.createElement('i');

  nodeList[forEach] = each;

  window.on = node.on = function (event, fn) {
    this.addEventListener(event, fn, false);

    return this;
  };

  nodeList.on = function (event, fn) {
    this[forEach](function (el) {
      el.on(event, fn);
    });
    return this;
  };

  window[trigger] = node[trigger] = function (type, data) { 
    var event = document.createEvent('HTMLEvents');
    event.initEvent(type, true, true);
    event.data = data || {};
    event.eventName = type;
    event.target = this;
    this.dispatchEvent(event);
    return this;
  };

  nodeList[trigger] = function (event) {
    this[forEach](function (el) {
      el[trigger](event);
    });
    return this;
  };

  kyu = function (s) { 
    var r = document.querySelectorAll(s || '?'),
        length = r.length; 
    return length == 1 ? r[0] : r;
  };

  kyu.on = node.on.bind(dummy);
  kyu[trigger] = node[trigger].bind(dummy);

  return kyu;
})(document, this);
</script>
</head>
<body>
<div id="hello"> 
<div id="container">
  siblings:<br>
  <input class="siblings" placeholder="Sibling 1"/><br>
  <input class="siblings" placeholder="Sibling 2"/><br>
  <input class="siblings" placeholder="Sibling 3"/><br/> 
    </div>
    <div id="container1">
      <input id="plus" type="button" value="+">
    <input id="ok"   type="button" value="ok">
    </div> 
<script type="text/javascript"> 
  kyu("#plus").addEventListener("click",function(){ 
    var container=kyu('#container');
    var siblings= kyu('.siblings');
    var count = siblings.length+1;
    var newNode = document.createElement("input"); 
    newNode.classList.add("siblings");
    newNode.placeholder = "siblings" + count; 
    container.appendChild(newNode); 
  }); 
  </script> 
</body>
</html>
 <script type="text/javascript"> 
  var btn = kyu("#ok");
  btn.onclick = function(){
  var req = new XMLHttpRequest();
    var siblings= kyu('.siblings');
     var wew=0;
    var res="";
    var data="{";
    while(siblings.length>wew){
      data+= "'Siblings #" + (wew+1) +"': '"+siblings[wew].value+"', ";
      wew++; 
    }
 data+="}";  
 var po= data.slice(0,-3)+"}"
 //var data={po};
  req.onreadystatechange = function() {
  if(req.readyState == XMLHttpRequest.DONE){
    var wew = JSON.parse(req.responseText); 

      // var new1p= new array('Siblings'=>wew);
      var ll= wew.Siblings; 
        //alert(ll);
     console.log(ll);

      //var mop=(JSON.parse(wew.Siblings));
  }
};
req.open("POST", "poi2.php", true);
req.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
req.send('siblings='+po);
}
</script>

and the second page is

<?php
extract($_POST);
$result= $siblings; 
$arrayName = array('Siblings'=>$result);

$poi = json_encode($arrayName);
echo $poi;
?>

Oleg · Answer 1 · 2019-05-15T20:30:33.457

0

While ll is a NodeList, it can be converted to array and then you can operate on it with array methods.

Like joining it with line breaks:

Array.prototype.slice.call(ll).join('\r\n')

Displaying the result in Console line by line

1 Answers1