laroy laroy -4 years ago 41
Javascript Question

Data Insertion From A Text File Into A Complex Table Layout (HTML, PHP, JS)

I'm building a webpage that utilizes a fairly complex table layout which will hold a decent amount of data. I don't want to hardcode all this data in, so I would like to read it in from a text file and dynamically create the webpage that way. The following is an example I have come up with to illustrate what I am trying to accomplish.

// imagine this as the basket that holds all the groceries
<table id=”basket”>

// this is the label for a new section of the basket (like fruits, or vegetables)
<thead>Fruits</thead>

// this is the section of the basket for the items described by the label above
<tbody>
<tr>
<td>

// this is the container of these items
<table class="category">

// a new section of the container for each item
<tr>
<td>

// information about this particular item
<table class="Item">
<tr><td>Strawberry</td></tr>
<tr><td>Red</td></tr>
<tr><td>Seeds</td></tr>
</table>
</td>

// verbose description about this item
<td>Strawberries are sweet and grow in the summer</td>
</tr>


So if I had data like the following:

Fruits
strawberry, red, seeds, Strawberries are sweet and grow in the summer
blueberry, blue, seeds, Willy Wonka likes these
avocado, green, pit, Still not sure how I feel about these
Vegetables
Celery, green, stalk, A top tier vegetable
Radish, Red, bulb, I still haven't warmed up to these
Potato, Brown, root, A classic!


Underneath the basket table I would have two instances of this code, one for fruits and one for vegetables

// this is the label for a new section of the basket (like fruits, or vegetables)
<thead>Fruits</thead>

// this is the section of the basket for the items described by the label above
<tbody>
<tr>
<td>

// this is the container of these items
<table class="category">


and within each of those sections I would have however many instances of this code as called for, (in this case, 3 for each because there are 3 fruits and 3 vegetables listed)

// a new section of the container for each item
<tr>
<td>

// information about this particular item
<table class="Item">
<tr><td>Strawberry</td></tr>
<tr><td>Red</td></tr>
<tr><td>Seeds</td></tr>
</table>
</td>

// verbose description about this item
<td>Strawberries are sweet and grow in the summer</td>
</tr>


So my ultimate question is,


  1. What is the best way for me to structure a text file in order to accomplish this



and


  1. With what kind of PHP or JavaScript could I successfully read this properly formatted text file, and then generate the HTML I want that contains the correct data



Any advice or insight would be appreciated, thank you.

Answer Source

Okay personally I'd recommend saving your data in json format which is a pretty standard way to represent this type of data. You could then supply it via AJAX or save it in a file and include it with a script tag. Really all depends on your requirements.

Also I don't know what your UI requirements are but I'd personally not create nested tables like this. I would use div tags and write custom css to get the layout I wanted.

// This could be supplied via AJAX or you could save it in a javascript or json file. 
// It really depends on your requirements.

var jsonData = [
  {
    name: "Fruits",
    items: [
      {
        name: "Strawberry",
        color: "red",
        type: "seeds",
        description: "Strawberries are sweet and grow in the summer"
      },
      {
        name: "Blueberry",
        color: "blue",
        type: "seeds",
        description: "Willy Wonka likes these"
      },
      {
        name: "Avocado",
        color: "green",
        type: "pit",
        description: "Still not sure how I feel about these"
      }
    ]
  },
  {
    name: "Vegetables",
    items: [
      {
        name: "Celery",
        color: "green",
        type: "stalk",
        description: "A top tier vegetable"
      },
      {
        name: "Radish",
        color: "red",
        type: "bulb",
        description: "I still haven't warmed up to these"
      },
      {
        name: "Potato",
        color: "brown",
        type: "root",
        description: "A classic!"
      }
    ]
  }
]

// This is the javascript code that would read your json data and build HTML from it

document.getElementById("basket").innerHTML = getBasketHTML(jsonData)

function getBasketHTML(data) {
  // loop through data
  var HTML = ""

  for (var i = 0, i_end = data.length; i < i_end; i++) {
    var category = data[i]

    // add new row and table for each category
    HTML += "<tr><table>"

    // add category label
    HTML += "<thead>" + category.name + "</thead>"

    // add category table
    HTML += "<tbody><tr><td><table class='category'>"

    // loop through category items and build HTML
    for (var j = 0, j_end = category.items.length; j < j_end; j++) {
      HTML += getItemHTML(category.items[j])
    }

    // close category table
    HTML += "</table></td></tr></tbody></table></tr>"
  }

  return HTML
}

function getItemHTML(item) {
  // opening row tag
  var HTML = "<tr>"
  
  // add item information
  HTML += "<td><table class='Item'>"
  HTML += "<tr><td>" + item.name + "</td></tr>"
  HTML += "<tr><td>" + item.color + "</td></tr>"
  HTML += "<tr><td>" + item.type + "</td></tr>"
  HTML += "</table></td>"

  // add verbose description
  HTML += "<td>" + item.description + "</td>"

  // closing row tag
  HTML += "</tr>"

  return HTML
}
<!DOCTYPE html>
  <html>
    <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width">
    </head>
    <body>
      <table id="basket"></table>
    </body>
  </html>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download