Can't append variable but can console log it

Question

I've struggled with this problem for a while but I can't seem to figure it out. I'm trying to loop through the JSON object and append the data for each array to a div in my index.php. But it's not working somehow I can however console.log the data but not append it.

var result;
getData();

function getData() {
    $.ajax({
        type: "POST",
        url: 'api/api.php',
        data: {
            'information' : 'info'
        },
        async: false,
        success: function(data) {
            result = data;
        },
        dataType: 'HTML'
    });

    result = $.parseJSON(result);
    //console.log(result[1].naam);
}

function dumpData(){
    console.log(test);
    for(var i = 0; i <= result.length; i++) {
        console.log(result[i].naam);
        $('<tr>').append(
            $('<td>').text(result[i].id),
            $('<td>').text(result[i].naam),
            $('<td>').text(result[i].brouwer)
        ).appendTo('#test');
    }
}

console.log('Loaded data.');
dumpData();
console.log('Dumped data.');

Index.php:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/Database.js"></script>

<body>
    <div id="test"></div>
</body>

UPDATE: dataType was meant to be JSON instead of HTML this was the problem.

I don't get it .. When does the error show ? When you get the data ? When you dump them ? I also don't see any `` in your Index.php that could be appended with your code — tektiv, May 20 '16 at 08:54
@mplungjan I reopened it as OP is using `async: false`, so technically it should work. — Rory McCrossan, May 20 '16 at 08:55
All those functions are getting done when the page loads. There is no error shown in the console. I dump them in the function dumpData() and it's called at the end of the file. There is no 's in the code because they are being made in the for loop @tektiv, I have litterly no clue why its not working :/ — ThomH, May 20 '16 at 08:57
@ThomH technically what you have should work fine, check the console for errors. That being said, using `async: false` is considered extremely bad practice. You should instead remove that property and call `dumpData()` from within the `success` handler of `$.ajax`, passing the `result` as a parameter. — Rory McCrossan, May 20 '16 at 08:57
Also note that you're attempting to append a `tr` to a `div`, which is not going to work very well — Rory McCrossan, May 20 '16 at 08:58
@RoryMcCrossan Thanks for the quick response I've tried what you said but it's giving some errors now http://prntscr.com/b68r4y , also if I use .length it returns 194304 instead of 750 arrays — ThomH, May 20 '16 at 09:03
You also loop once too many with your `<=` - see my answer for details — mplungjan, May 20 '16 at 09:08

mplungjan · Accepted Answer · 2016-05-20T09:07:52.487

The canonical way to do what you are trying is to not use async:false, to append in the success of the call and to append the rows to a table.

You also loop once too many with the <=

Also your code relies on the result to be correct JSON and not HTML as in

var result = [ 
  { "id":"0", "naam":"Thom", "brouwer":"Heineken" },
  { "id":"1", "naam":"Bram", "brouwer":"Amstel" },
  { "id":"2", "naam":"Aad", "brouwer":"Grolsch" } // no comma on the last
  ];


function dumpData(result){
    console.log(result);
    for(var i = 0; i < result.length; i++) {
        $('<tr>').append(
            $('<td>').text(result[i].id),
            $('<td>').text(result[i].naam),
            $('<td>').text(result[i].brouwer)
        ).appendTo('#test');
    }
}

console.log('Loaded data.');
dumpData(result);
console.log('Dumped data.');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tbody id="test"></tbody>
</table>

I would personally code the Ajax as

function getData() {
  $.ajax({
    type: "POST",
    url: 'api/api.php',
    data: {
        'information' : 'info'
    },
    success: function(data) {
        dumpData(data)
    },
    dataType: 'JSON'
  });
}

and have

function dumpData(data){

Thank you, the problem was that I had dataType on 'HTML' in the ajax call instead of JSON — ThomH, May 20 '16 at 09:15

score -1 · Answer 2 · answered May 20 '16 at 09:06

You can try setting HTML directly in loop to div test.

$('#test').html('<tr><td>'"+ result[i].id +"'</td><td>'"+ result[i].naam +"'</td><td>'"+ result[i].brouwer +"'</td></tr>');

instead of

$('<tr>').append(
   $('<td>').text(result[i].id),
   $('<td>').text(result[i].naam),
   $('<td>').text(result[i].brouwer)
).appendTo('#test');

Can't append variable but can console log it

2 Answers2