1

I've seen a couple posts on this but I haven't been able to make anything work. I'm trying to pull the data from a JSON file into an HTML table. Each post I've tried to follow to make it work brings back nothing so I don't know if the functions are working and I'm just not pulling them in right, or if they're all just wrong. So, here's my JSON file:

    {
"Parts": [
        {
         "CIMs":17748, 
         "Name":"Bizerba XC100 Printer", 
         "Description":"Bizerba XC100 Print Assembly",
         "Category":"Scales",
         "Location": "Shelf 1",
         "Amount": 3
         },
        {
          "CIMs":17738,
          "Name": "Bizerba XC100 Spool",
          "Description":"Bizerba XC100 Label Spool",
          "Category":"Scales",
          "Location": "Shelf 1",
          "Amount":4
          },
        {
         "CIMs":12345,
         "Name":"Lexmark MS711de",
         "Description": "Lexmark MS711de for FMC and ICC",
         "Category":"Printers",
         "Location":"Crash Site",
         "Amount":1
         },
        {
         "CIMs":23456,
         "Name":"Bill Acceptor",
         "Description":"Bill Acceptor for SCO 4.2 and 5.0",
         "Category":"SCO",
         "Location":"Shelf 2",
         "Amount":4
         },
        {
         "CIMs":34567,
         "Name": "TCU",
         "Description":"TCU for nextgen registers",
         "Category":"Registers",
         "Location":"Shelf 2",
         "Amount":2
         },
        {
         "CIMs":45678,
         "Name":"HP Desktop",
         "Description":"HP Desktop for use by everyone but managers",
         "Category":"Computers",
         "Locaton":"Shelf 2",
         "Amount":2
         },
        {
         "CIMs":56789,
         "Name":"HP DL160 HDD",
         "Description":"HP DL160 G6 160GB 2.5 inch replacement drive",
         "Category":"Servers",
         "Location":"Shelf2",
         "Amount":6
         }
    ]}

And here's the script I have setup:

    <script>
    $(function(){
var partsList = [];
$.getJSON('partslist.json', function(json){
    $.each(json.properties, function(i, f) {
        var tblRow = "<tr>" + "<td>" + f.CIMs + "</td>" 
                + "<td>" + f.Name + "</td>"
                + "<td>" + f.Description + "</td>"
                + "<td>" + f.Category + "</td>"
                + "<td>" + f.Location + "</td>"
                + "<td>" + f.Amount + "</td>" + "</tr>";
        $(tblRow).appendTo("#partsListData tbody");
    });
});
    }); </script>

My table:

                <section>
            <h2>Parts</h2>
            <table id="partsListData" border="1">
                 <thead>
                    <th>CIMs</th>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Category</th>
                    <th>Location</th>
                    <th>Amount</th>
                </thead>
              <tbody>
               </tbody>
            </table>
            <p><a href="#" style="color: black; align-content: center;">Add Parts</a></p>
            <p><a href="#" style="color: black; align-content: center;">List Categories</a></p>
        </section>

What am I missing? What do I need to do in my webpage to make that pull? I've tried placing the script right under the tag and also within the with no luck. Help?

EDIT: I managed to get the table to show up with the headers but the data comes back undefined. I have also updated the code in the post to what I currently have.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Hiattech
  • 43
  • 6
  • where is the
    tag?     – McNets Nov 19 '16 at 18:54
  • You're doing this through a web server and not just trying to read a local JSON right? – jeff carey Nov 19 '16 at 19:04
  • Well, kind of both. I host a webserver and i'm running both files from the same folder. I use XAMPP on my system to duplicate the server setup. – Hiattech Nov 19 '16 at 19:38
  • I tried the tag before the script and ended it after the script but it didn't work. how do i call the function with the table?
     – Hiattech Nov 19 '16 at 19:46
  • Possible duplicate of [how to use json file in html code](http://stackoverflow.com/questions/12070631/how-to-use-json-file-in-html-code) – A1raa Nov 19 '16 at 20:34
  • @A1raa Thanks for the link to that. I was able to get it a bit further towards working. I guess my JSON data had too many sub arrays. I removed the "computers, servers, etc" and just put everything under parts but now all the tables come up as "Undefined"... – Hiattech Nov 19 '16 at 21:01
  • @jeffcarey In my script, the var partsList []; says it's unused as does the i in the function(i,f) is that normal? perhaps that's why none of my data is coming through? – Hiattech Nov 19 '16 at 21:09
  • @mcNets Here's my table
    CIMs Name Description Category Location Amount
    – Hiattech Nov 19 '16 at 21:10
  • @Hiattech as for me seems correct. Has you validated the json file? what's the result? – McNets Nov 19 '16 at 22:59

1 Answers1

0

I simplified my json file and followed the post that A1raa linked My file didn't want to update initially but after a force refresh of the page, the data started displaying.

Community
  • 1
  • 1
Hiattech
  • 43
  • 6