JavaScript - Convert JSON Array into HTML elements

Question

I have a JSON Array of messages that I need to convert into html elements to use for displaying in my web page. The JSON that I'm receiving looks like this:

    {
    "data": [
        {
            "fieldData": {
                "Message": "Message 1",
                "Timestamp": "04/14/2023 11:39:13"
            }
        },
        {
            "fieldData": {
                "Message": "Message 2",
                "Timestamp": "04/13/2023 10:02:18"
            }
        },
        {
            "fieldData": {
                "Message": "Message 3",
                "Timestamp": "08/19/2021 19:51:21"
            }
        }
    ]
}

I need to extract each 'Message' and 'Timestamp' Value from the Array and place them in tags like the following for the first array:

<p class="from-them">Message 1</p>
<time class="timestamp-to">04/14/2023 11:39:13</time>

So using the sample JSON above the end result would be:

<p class="from-them">Message 1</p>
<time class="timestamp-to">04/14/2023 11:39:13</time>
<p class="from-them">Message 2</p>
<time class="timestamp-to">04/13/2023 10:02:18</time>
<p class="from-them">Message 3</p>
<time class="timestamp-to">08/19/2021 19:51:21</time>

It's my first time trying to write a JavaScript function to convert an array into individual html elements and not sure where to start here.

You have asked almost 150 questions tagged JavaScript over 10 years and you still don't know where to start? — gre_gor, May 25 '23 at 05:41

score 0 · Accepted Answer · answered May 25 '23 at 06:30

convert your JSON in a normal Object that JS can use either by using the map() function or by simply parsing the JSON with JSON.parse()
then use a for-loop that loops through every object within the array
Use createElements to actually create that element:

let json_data = `{
  "data": [
    {
      "fieldData": {
        "Message": "Message 1",
        "Timestamp": "04/14/2023 11:39:13"
      }
    },
    {
      "fieldData": {
        "Message": "Message 2",
        "Timestamp": "04/13/2023 10:02:18"
      }
    },
    {
      "fieldData": {
        "Message": "Message 3",
        "Timestamp": "08/19/2021 19:51:21"
      }
    }
  ]
}`;

// parse JSON
let data = JSON.parse(json_data);


// loop to create the elements
for (let messageIndex = 0; messageIndex < data.data.length; messageIndex++) {
  let message = data.data[messageIndex].fieldData.Message;
  let timestamp = data.data[messageIndex].fieldData.Timestamp;
  
  // create Message
  let messageElement = document.createElement('p');
  messageElement.classList.add('from-them');
  messageElement.textContent = message;
  document.body.appendChild(messageElement);
  
  // create Timestamp
  let timestampElement = document.createElement('time');
  timestampElement.classList.add('timestamp-to');
  timestampElement.textContent = timestamp;
  document.body.appendChild(timestampElement);
}

score -1 · Answer 2 · answered May 25 '23 at 05:40

To make a html element, you need to do something like:

var pElement = document.createElement('p'); //use different parameter to make different elements
pElement.className = 'className';
pElement.textContent = 'textContent';
// and essentially you put it in the DOM
document.body.appendChild(pElement);

Now, you just need to make a for loop (for "data") and within each iteration make the p element and time element, and append them to the DOM.

JavaScript - Convert JSON Array into HTML elements

2 Answers2