Skip to content
Advertisement

JSON Parse and JSON Stringify are not printing well

I have a section of my code, that is supposed to take the data from the JSON file and turn it into individual buttons which will later be styled. I want the button to look like this:

<button>NAME WOULD BE HERE; INTERESTS WOULD BE HERE</button>

The code I have to do this is as follows:

function load() {
var arrayInput = '[{"name" : "Jeff", "interests" : "3"}, {"name" : "Harry", "interests" : "2"}, {"name" : "Bob", "interests" : "coding"}, {"name" : "Jay", "interests" : "coding"}]';
var array = JSON.stringify(arrayInput);
        var resultBoxs = document.getElementById("resultBoxs");
        for (var i = 0; i < array.length; i++) {
            var buttonCreate = document.createElement("button");
            buttonCreate.type = "checkbox";
            buttonCreate.innerHTML = array[i]

                resultBoxs.appendChild(buttonCreate);
            
        }
        }
<body onload="load()">
<div id="resultBoxs"></div>
</body>

The result for the code when I have it set to stringify is what you see in figure 1. Figure 1 The result for the code when I have it set to parse the data is what you see in figure 2. It constantly creates more and more buttons for the data, which I do not want. I want it to create one button that follows the template above, for each person/name in the data list. Figure 2

Thanks.

Advertisement

Answer

Very close! Two things:

First and major problem was, you were calling JSON.stringify(arrayInput); and not JSON.parse(arrayInput);, the parse function turns JSON string into a object.

Secondly, the buttonCreate.innerHTML = array[i] needed to be buttonCreate.innerHTML = array[i].name + "; " + array[i].interests;, this new code is actually pulling the properties out of your array element whereas your were just putting the whole object into the innerHTML; [Object object] gets printed out on your buttons.

Here is what you’re looking for:

function load() {
var arrayInput = '[{"name" : "Jeff", "interests" : "3"}, {"name" : "Harry", "interests" : "2"}, {"name" : "Bob", "interests" : "coding"}, {"name" : "Jay", "interests" : "coding"}]';
var array = JSON.parse(arrayInput);
        var resultBoxs = document.getElementById("resultBoxs");
        for (var i = 0; i < array.length; i++) {
            var buttonCreate = document.createElement("button");
            buttonCreate.type = "checkbox";
            buttonCreate.innerHTML = array[i].name + ";" + array[i].interests;
                resultBoxs.appendChild(buttonCreate);
        }
   }
<body onload="load()">
<div id="resultBoxs"></div>
</body>
Advertisement