JSFiddle - React, Tailwind, and code Playground

by Dan Wright

HTML

<form action="" method="post" class="toArray">
    <input class="area" type="button" name="key1" value="Expected_1_Performance" />
    <input class="area" type="button" name="key2" value="Expected_2_Performance" />
    <input class="activeInput" type="button" name="key3" value="red" />
    <input class="activeInput" type="button" name="key4" value="France" />
</form>
<div id="results">Something is not working - results</div>
<div id="newList">Something is not working - newList</div>
<div id="serArray">Something is not working - serArray</div>
<div id="objKey">Something is not working - objKey</div>
<div id="length">Something is not working - objKey</div>

CSS

input, button {
    max-width:200px;
    height:60px;
}
.breakword {
    word-wrap:break-word;
    word-break:break-all;
}

JavaScript

var compList = $('[name^=key]').map(function () {
    var list = $(this);
    //PlainObject type - containing zero or more key-value pairs 'name-value'
    var obj = {};
    obj[list.attr('name')] = list.val();
    return obj;

}).get();

//$("input:button").focus();
var results = JSON.stringify(compList);
$('#results').empty();
$('#results').html('JSON - compList: ' + results);
//alert('JSON: ' + (JSON.stringify(compList)));

var newList = (JSON.stringify(compList));
$('#newList').empty();
$('#newList').html('newList: ' + newList);
//alert('newList: ' + newList);

var serArray = $(compList).serialize();
$('#serArray').empty();
$('#serArray').html('serArray: ' + newList);
//alert('serArray: ' + newList);

//Returns number of key/value pairs in array - does not work in <IE9
var objKey = (Object.keys(compList).length);
$('#objKey').empty();
$('#objKey').html('objKey: ' + objKey);
//alert('objKey: ' + objKey);

//Returns number of key/value pairs in array - All Browsers - JAVASCRIPT
var length = 0;
//change this line: 
for (prop in compList) {
    if (compList.hasOwnProperty(prop)) length++;
}
$('#length').empty();
$('#length').html('length:' + objKey);
//alert('length: ' + length);