Convert dynamic JSON array to HTML

Question

I have a Django view that will return JSON data depending on what is given to it. Each JSON element will have the same fields but the returned JSON array will have a dynamic amount of elements.

Here is an example of the possible JSON data that could be returned:

[
   {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
   }
]

Here is an example or a JSON return with multiple elements:

[
   {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
   },
   {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
    }
]

Using JavaScript, I would like to turn this into HTML similar to following and assign it to a variable.

Open Job Lines: 0 <br>
Open Hours: 0 <br>
Repair Order: 123454 <br>
Expected Pay: 1.9 <br>
Actual Pay: 1.0 <br>
Pay Status: Underpaid <br>

Open Job Lines: 0, <br>
Open Hours: 0 <br>
Repair Order: 123454 <br>
Expected Pay: 1.9 <br>
Actual Pay: 1.0 <br>
Pay Status": Underpaid <br>

Oscar, I apologize for any confusion. I was under the impression that JSON is a standardized format that is JavaScript Object Notation. I don't understand, yet, why what I posted isn't JSON. — L.hawes
– L.hawes, Commented Jan 22, 2018 at 22:28
@L.hawes Look how a JSON looks like, read this: json.org/example.html — Oscar Jara
– Oscar Jara, Commented Jan 22, 2018 at 22:33
JSON is a standardized format for encoding objects in strings. If it's not a string, it's not JSON. You can't access properties of objects-encoded-into-JSON-strings from the JSON-strings. The things you posted are objects. — AuxTaco
– AuxTaco, Commented Jan 22, 2018 at 22:38

Oscar Jara · Accepted Answer · 2018-01-22 22:36:22Z

1

Is this what you need?

Because you question is not that clear.

$(document).ready(function() {

  // Let's assume your data was already returned from the AJAX call...
  var data = [{
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
  }, {
      "Open Job Lines": 0,
      "Open Hours": 0,
      "Repair Order": "123454",
      "Expected Pay": 1.9,
      "Actual Pay": 1.0,
      "Pay Status": "Underpaid"
  }];

  displayHTML(data, $('#output'));

});

/**
 * Used to build and display the HTML from a specific set of data.
 * @param {Object[]} - An array of objects containing the data to be processed.
 * @param {Object} - A jQuery object with the element where the HTML will be displayed.
 */
function displayHTML(data, outputEl) {
  $.each(data, function(index, record) {
    for (var property in record) {
      if (record.hasOwnProperty(property)) {
        outputEl.append('<b>' + property + '</b>: ' + record[property] + '<br>');
      }
    }
    outputEl.append('<br>');
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output"></div>

edited Jan 22, 2018 at 22:36

answered Jan 22, 2018 at 22:25

Oscar Jara

14.1k10 gold badges64 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

L.hawes Over a year ago

Yes Oscar this is what I was looking for. I just changed the data variable to var data = JSON.parse(myjson); in the success function of my ajax call. Thanks for the help and for the clarification.

Collectives™ on Stack Overflow

Convert dynamic JSON array to HTML

1 Answer 1

Is this what you need?

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Is this what you need?

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related