I want to append my api response to datatable-CodePudding

I have a response in json which I am getting from the api. I want to embed that into the datatable. One by one so they can be shown in a row. But i am getting an error and the all of the data in being appended under one column.

This is my json response

And I am trying to read the data through the fetch API and then appending it to the table.

<table id="table1"  style="min-width: 845px">
                                    <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>File Name</th>
                                            <th>Action</th>
                                        </tr>
                                     </thead>
                                    <tbody id="tbodydata"> 
                            
                                </tbody>
                                </table>

fetch api call is below

fetch('https://e728-185-202-239-227.ngrok.io/pakgentext/getFilesByPath/?path=' product , {

                method: "GET",
               
                headers : {
                    'Content-Type' : 'application/json'
                },
            })
            .then((response) => response.json())
            .then((resp) => {
                console.log(resp);
                if(resp.message == "Success"){

                  
                    $.each(resp.doc, function (index, value) { 
                        $("#table1  ").append('<td>' value '</td>');
                    });
        
                }else{

                }
            })

I tried looping through my response to append it one by one but its all appending in the same column.

CodePudding user response：

You need to take action on resp.doc.txtFiles, not resp.doc. Look through the array and construct a table row from each item. For better performance it is better to first generate the HTML of all rows, then update the DOM, e.g. reduce the number of .append() to one.

From your example it is not clear what the table columns ID, File Name, and Action entail, so I took a guess.

Here is the code to generate the HTML from the response, and update the DOM:

                if(resp.message == "Success") {
                    let html = resp.doc.txtFiles.map(fileName => {
                        let id = fileName.replace(/\.txt$/, '');
                        let action = '??';
                        return '<tr> <td>' id '</td> <td>' fileName '</td> <td>' action '</td> </tr>';
                    }).join(' ');
                    $("#table1 tbody").append(html);
                }

UPDATE 1 The OP changed the format of the JSON response to:

{
  "message": "Success",
  "doc": [
    { "filename": "PhD-D-E_T-F-001.txt" },
    { "filename": "PhD-D-E_T-F-002.txt" },
    { "filename": "PhD-D-E_T-F-003.txt" }
  ]
}

With this, the code changes to this:

                if(resp.message == "Success") {
                    let html = resp.doc.map(obj => {
                        let fileName = obj.filename;
                        let id = fileName.replace(/\.txt$/, '');
                        let action = '??';
                        return '<tr> <td>' id '</td> <td>' fileName '</td> <td>' action '</td> </tr>';
                    }).join(' ');
                    $("#table1 tbody").append(html);
                }