-3

What I'm trying to do is to fill a table with some info from JSON file big.json, I need to do this with jQuery.

It looks like this now but not working:

 <div class="stink">
    <table>
      <tr>
        <th>Car</th>
        <th>fault1</th>
        <th>fault2</th>
      </tr>

      <script>
        $.getJSON( "data.json", function( data ) {
          var items = [];
          $.each( data, function( key, val ) {
            items.push( "<li id='" + key + "'>" + val + "</li>" );
          });
          $( "<ul/>", {
            "class": "my-new-list",
            html: items.join( "" )
          }).appendTo( "body" );
        });
      </script>

    </table>
  </div>

the JSON file structure is:

{
    "Mercedes": {
        "fault1":"not working",
        "fault2":"key issues"       
    },
    "BMW": {
        "fault1":"not starting",
        "fault2":"control problem"
    }
}

How can I parse in the table those info with JQUERY ?

Litisqe Kumar
  • 2,512
  • 4
  • 26
  • 40
Liza
  • 298
  • 3
  • 13
  • 3
    "Not working" is not a very good description of an error. – adeneo Jan 12 '14 at 20:44
  • Could you post how you would like your final html to look like for your example? – Edgar Villegas Alvarado Jan 12 '14 at 20:44
  • NOT COOL VOTE DOWN WITHOUT ANY REASON!!! – Liza Jan 12 '14 at 20:45
  • Could you post the error you are getting? – mituw16 Jan 12 '14 at 20:45
  • @adeneo this is a dummy text, i thought it's understandable, sorry for not mentioning this. – Liza Jan 12 '14 at 20:45
  • @mituw16 no error, just not displaying anything – Liza Jan 12 '14 at 20:46
  • @EdgarVillegasAlvarado i want the info form the JSON file to be in the table from HTML, like CAR to have Mercedes, BMW and faults under faults in the table, did you get it ? – Liza Jan 12 '14 at 20:47
  • @Liza could you put an `alert(JSON.stringify(data))` before `var items ...` and tell us what happens? – Edgar Villegas Alvarado Jan 12 '14 at 20:47
  • @EdgarVillegasAlvarado i just added the alert, nothing happens :( – Liza Jan 12 '14 at 20:49
  • So there's a problem with your ajax call, maybe the file name is different or its inner format is corrupted. Change `getJSON` by `get` for a minute and tell us if it shows the alert – Edgar Villegas Alvarado Jan 12 '14 at 20:53
  • @EdgarVillegasAlvarado i changed the `get` nothing happened :( , the name and structure of JSON are correct, because i succeeded to make it parse with PHP, i just want to make it work in JQUERY too :( – Liza Jan 12 '14 at 20:55
  • 5
    It doesn't really matter if it's a dummy text, just writing "it's not working" gets us nowhere! What have you tried, what exactly is happening, did you open the console and check for errors, did you chain on a fail function to see if there are any errors etc. – adeneo Jan 12 '14 at 20:55
  • You didn't load jQuery, or your json url is wrong – Edgar Villegas Alvarado Jan 12 '14 at 20:57
  • 1
    Your code is right, so, it's helpless. Then, considering the fact that there is no mistake at first glance, I bet you have enough skills to figure out this problem by yourself. Did you open the console? Did you paste the URL into the address bar? Remember, if you were downvoted, there must be a reason. –  Jan 12 '14 at 21:05
  • @EdgarVillegasAlvarado ok, so it worked, but it's displaying `[object Object]` , how can i get the actual data? i'm not expert in JQUERY, i want to do it like in php so i can `echo` inside the table, is it possible? – Liza Jan 12 '14 at 21:35
  • @Liza Is your `alert(JSON.stringify(data))` showing that? it's strange. Does that happen with `.getJSON` or with `.get` ? – Edgar Villegas Alvarado Jan 12 '14 at 21:46
  • 1
    You are trying to concatenate an object with a string and the default string representation is `[object Object]`. You don't have to be a jQuery expert to know that, because that's basic JavaScript. If you know PHP, then you probably also know that you get a similar behavior with arrays. If you do `echo 'data: ' . $someArray;`, then you get `data: Array` as output. You have to access the properties of the object you want to display. Have a look here: http://stackoverflow.com/q/11922383/218196. – Felix Kling Jan 12 '14 at 21:46
  • @EdgarVillegasAlvarado yes, the alert is showing the data correctly, with the `getJSON`, what can i do so i can get this data to show, because i want to implement something like this http://jsfiddle.net/planetoftheweb/XcpGN/5/ but id possible without declaring the data inside the script but in a json file, how can i do this? Thanks! – Liza Jan 12 '14 at 21:49
  • @Liza I added an answer, please check it – Edgar Villegas Alvarado Jan 12 '14 at 22:00
  • @FelixKling thank you for explaining to me Felix :) – Liza Jan 12 '14 at 22:05

1 Answers1

1

As you have a table, you'd better not show your info with lists, but use the table. With this:

 $.getJSON( "data.json", function( data ) {

    $.each( data, function( key, obj ) {
        var items = [];
        items.push( "<td>" + key + "</td>" );   //Car name
        items.push( "<td>" + obj.fault1 + "</td>" );  //fault1
        items.push( "<td>" + obj.fault2 + "</td>" );  //fault2

        $( "<tr/>", {
            "class": "my-new-list",
            html: items.join( "" )
        }).appendTo( ".stink table" );
    }); 
});

I tried to modify your code at little as possible so you understand it better.

Lightness Races in Orbit
  • 378,754
  • 76
  • 643
  • 1,055
Edgar Villegas Alvarado
  • 18,204
  • 2
  • 42
  • 61