JSFiddle - React, Tailwind, and code Playground

by chim

HTML

<h4>Object</h4>
<div id="myObject"></div>
<h4>Array (default jQuery map behaviour)</h4>
<div id="myArray"></div>
<h4>Array with null values preserved</h4>
<div id="myArrayWithNulls"></div>

CSS

h4 {
    margin-bottom: 0;
}
div {
    white-space: pre-line;
    margin: 0 0 20px 0;
}

JavaScript

var myObject = {
    x: {type : 'r', size: 1},
    y: {type : 'r', size: 1},
    z: null,
    a: {type : 'r', size: 1},
    b: {type : 'r', size: 1},
},
    
myArray = jQuery.map(myObject, function (el) {
  return el;
}),

myArrayWithNulls = jQuery.map(myObject, function (el) {
  return [el];
});

jQuery('#myObject').html(JSON.stringify(myObject));
jQuery('#myArray').html(JSON.stringify(myArray));
jQuery('#myArrayWithNulls').html(JSON.stringify(myArrayWithNulls));