JSFiddle - React, Tailwind, and code Playground

by Mark Seagoe

HTML

<p id="box1">box1 unused</p>
<p id="box2">box2 unused</p>
<p id="box3">box3 unused</p>

CSS

p {
    font: 12px monospace;
}

JavaScript

var obj1 = {
    "key1": "val1",
    "key2": "val2",
    "key3": "val3"
};

box1.innerText = "Input: " + JSON.stringify(obj1);

var arr1 = [];
for( keystr in obj1 ) {
    valstr = obj1[keystr];
    arr1.push({keystr : valstr});
}
box2.innerText = "Output1: " + JSON.stringify(arr1);

var arr2 = [];
for( keystr in obj1 ) {
    var obj = {};
    obj[keystr] = obj1[keystr];
    arr2.push(obj);
}
box3.innerText = "Output2: " + JSON.stringify(arr2);