Viewing Values in JSON

Question

Viewing Values in JSON

I've been struggling with handling JSON values for some time now. When making an AJAX call, I receive JSON values and now I need to display them in a specific format. For instance, let's say the returned values are

{"Heading 1":["Content 1","Content 2"],"Heading 2":["Content 1","COntent 2","Content 3"],"Heading3":["Content 1"]}

I would like to present them as follows:

<h4>Heading 1</h4> <input type="checkbox">Content 1<br><input type="checkbox">Content 2<br>
<h4>Heading 2</h4> <input type="checkbox">Content 1<br><input type="checkbox">Content 2<br><input type="checkbox">Content 3<br>
<h4>Heading 3</h4> <input type="checkbox">Content 1<br>

Any suggestions on how to achieve this?

javascript json

Answer 1

Answer №1

Give this method a try:

let information, boxHolder, keyword, currentHeader, headerElement, index, check;

information = {"Section A":["Data 1","Data 2"],"Section B":["Data 1","Data 2","Data 3"],"Section C":["Data 1"]};

boxHolder = document.createElement("div");
for (keyword in information) {
    currentHeader = information[keyword];
    headerElement = document.createElement("h4");
    headerElement.innerHTML = keyword;
    boxHolder.appendChild(headerElement);
    for (index = 0; index < currentHeader.length; index++) {
        check = document.createElement("input");
        check.type = "checkbox";
        boxHolder.appendChild(check);
        boxHolder.appendChild(document.createTextNode(currentHeader[index]));
        boxHolder.appendChild(document.createElement("br"));
    }
}

document.body.appendChild(boxHolder);

DEMO: http://example.com

This code can be executed within the window.onload event (similar to the jsFiddle example)

Answer 2

Give this method a try:

let information, boxHolder, keyword, currentHeader, headerElement, index, check;

information = {"Section A":["Data 1","Data 2"],"Section B":["Data 1","Data 2","Data 3"],"Section C":["Data 1"]};

boxHolder = document.createElement("div");
for (keyword in information) {
    currentHeader = information[keyword];
    headerElement = document.createElement("h4");
    headerElement.innerHTML = keyword;
    boxHolder.appendChild(headerElement);
    for (index = 0; index < currentHeader.length; index++) {
        check = document.createElement("input");
        check.type = "checkbox";
        boxHolder.appendChild(check);
        boxHolder.appendChild(document.createTextNode(currentHeader[index]));
        boxHolder.appendChild(document.createElement("br"));
    }
}

document.body.appendChild(boxHolder);

DEMO: http://example.com

This code can be executed within the window.onload event (similar to the jsFiddle example)

Answer 3

Answer №2

let data ={"Title 1":["Text 1","Text 2"],"Title 2":["Text 1","Text 2","Text 3"],"Title 3":["Text 1"]}
object = JSON.parse(data);


for ( checkCondition){
    generateElements();

}
addContent();

Answer 4

let data ={"Title 1":["Text 1","Text 2"],"Title 2":["Text 1","Text 2","Text 3"],"Title 3":["Text 1"]}
object = JSON.parse(data);


for ( checkCondition){
    generateElements();

}
addContent();

Viewing Values in JSON

Answer №1

Answer №2

Similar questions

Unable to deploy a node.js package via a jenkins job

Turn off dropdown menu animation (JavaScript)

Error: Unable to save the image, encountered a TypeError while trying to create a new document using mongoose and express

Develop an Azure function using Node.js and pg-promise to insert data into a Postgres database with timescaleDB support

I am struggling to retrieve the data from the Giphy API after making the initial AJAX request

Sharing component controllers in Angular2 allows for better organization and reuse of

directive does not execute when the <Enter> key is pressed

Removing data from firestore/storage does not follow the expected pathway

Selenium fails to detect elements that are easily located by the browser using the aba elements, as well as through the use of JavaScript in the console

Sending data from Node.JS to an HTML document

Assigning a distinct identifier to every item in a dropdown list in MVC

JQuery is facing issues with its .each loop when trying to iterate through elements that have dynamically changing class names

Trouble integrating JSON data with Newtonsoft.Json library in WPF applications

What methods can be used to access web content with Java programming language?

React Router Error: Hook call invalid. Remember to only use hooks inside the body of a function component

How can I ensure that the display only updates upon clicking the submit button, and not every time the search is modified

Having trouble uploading a JSON array file to your Elasticsearch index?

Utilize React.js to showcase a component featuring an onClick event handler

Issues with Navigation and Routing in Ionic and AngularJs are causing trouble

Ajax is displaying some unusual behavior