how to get data from json with tree format (2)

ycusoy · June 2019

how get and read to datatable if json format like this:

{
    "china": {
        "prov": "meizu",
        "port": 4533,
        "name": "hongkong"
    },
    "USA": {
        "prov": "boston",
        "port": 78574,
        "name": "New York"
    },
    "Jakarta": {
        "prov": "Java",
        "port": 3457,
        "name": "Irian"
    },
    "Israel": {
        "prov": "tel Aviv",
        "port": 008886,
        "name": "Musrq"
    },
    .......
}

asume like

|country | prov | port | name

|china | meizu | 4533 | hongkong
|USA | boston | 78574 | New York
|Jakarta | Java | 3457 | Irian
|Israel | tel Aviv | 008886 | Musrq

kthorngren · June 2019

I recently answered a similar question in this thread:
https://datatables.net/forums/discussion/comment/152746#Comment_152746

Does this help?

Kevin

ycusoy · June 2019

I saw that and learned about it. it looks like there are different structures of data variables. I see there is regularity of the lines in each data head, so that it is able to be defined to the head of the title. I took part of the example:

var data = [{
            "family_code": "471",
            "District": "Barabanki",
            "Block": "Masauli",
            "Panchayat": "Chilauki",
            "Religion": "1",
            "Name": "Shyamavati",
            "Pension": "3"
        }, {
            "family_code": "500",
            "District": "Barabanki",
            "Block": "Masauli",
            "Panchayat": "Chilauki",
            "Religion": "1",
            "Name": "Phoolmati",
            "Pension": "3"
        }
    ];

whereas for the questions I submitted above, each of the heads does not have a regular definition. so I have difficulty entering it in the data table. data is only read from regular lines, for example the second row. while the head cannot be inserted.

{
    "china": { // << this is the data head that I want to enter into the data table
        "prov": "meizu",
        "port": 4533,
        "name": "hongkong"
    },
    "USA": {  // << this is the data head that I want to enter into the data table
        "prov": "boston",
        "port": 78574,
        "name": "New York"
    },
    "Jakarta": { // << this is the data head that I want to enter into the data table
        "prov": "Java",
        "port": 3457,
        "name": "Irian"
    },
    "Israel": { // << this is the data head that I want to enter into the data table
        "prov": "tel Aviv",
        "port": 008886,
        "name": "Musrq"
    },
    .......
}

kthorngren · June 2019

Sorry, I meant to link to this thread. I thin the example I provide you in this thread should work. Did you try it?
https://datatables.net/forums/discussion/56528/how-to-get-data-from-json-with-tree-format#latest

Kevin

ycusoy · June 2019

there I did not find an answer, it was more directed at repeating the title in the headline. what I mean above is different from before ...

kthorngren · June 2019

My last post restructured your data to one that Datatables supports:
http://live.datatables.net/kumixemu/1/edit

I believe the above is the same structure and my example should work. Basically the problem is solved by looping through the JSON response to restructure it for Datatables. Or you can do this server side.

If you need further help please post an example or update mine with your data and your code to restructure the data. This will allow us a better opportunity to help you.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

ycusoy · June 2019

Thank you for the answer, then I tried to change a little of the example you gave. I refer directly to using ajax in the command. the results are like this and do not show changes:

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
    <style>
      body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
    </style>
  </head>
  <script>
    $(document).ready( function () {


 var data = [];

for (var id in data) {
  if (json.hasOwnProperty(id)) {
    var temp = {};
    temp = json[id];
    temp.id = id;

    data.push(temp);
  }
}

  $('#example').DataTable({
   ajax: {
                url: "https://www.zpool.ca/api/currencies",

            },
    data: data,
    columns: [
      {data: 'id'},
      {data: 'algo'},
      {data: 'port'},
      {data: 'name'}

    ]
  });
} );
  </script>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>ID</th>
            <th>Algo</th>       
            <th>Port</th>
            <th>Name</th>
          </tr>
        </thead>

        <tfoot>
          <tr>
          <tr>
             <th>ID</th>
            <th>Algo</th>       
            <th>Port</th>
            <th>Name</th>
          </tr>
          </tr>
        </tfoot>
      </table>
    </div>
  </body>
</html>

kthorngren · June 2019

Its confusing to keep referring to your other thread but in that thread we were discussing using the ajax.dataSrc option. You posted a code snippet and asked what to put in the ajax.dataSrc function. I provided an example of how this could be done and noted that you should return the generated data instead of json.data. You still need to put this code in the ajax.dataSrc function and return the generated data.

I think this is more what you are looking for:

  $('#example').DataTable({
   ajax: {
                url: "https://www.zpool.ca/api/currencies",
                   "dataSrc": function ( json ) {
                     var data = [];
  
                     for (var id in json) {
                       if (json.hasOwnProperty(id)) {
                         var temp = {};
                         temp = json[id];
                         temp.id = id;
                         //console.log(temp);
                         data.push(temp);
                       }
                     }
                    return data;
                   } 

            },
    columns: [
      {data: 'id'},
      {data: 'algo'},
      {data: 'port'},
      {data: 'name'}
 
    ]
  });

Kevin

ycusoy · June 2019

it works. great job. thank you for a very detailed explanation. I don't know what to say but thank you.

ycusoy · June 2019

hi kevin, I followed the example at this and I met new problems and had difficulty defining the json format like this:

      {
            "data": [{
                "canada": {
                    "at": "22",
                    "lat": 25
                }
            }, {
                "boston": {
                    "at": "30",
                    "lat": 35
                }
            }],
            "label": "3344"
        }

and I write in javascript:

 $(document).ready(function() {
            $('#example').DataTable({
                "processing": true,
                "ajax": {
                    "url": "city.json",
                    "dataSrc": "data"
                },
                "columns": [{
                    "data": "0",
                }, {
                    "data": "0.at",
                }, {
                    "data": "0.lat",
                }],
            });
        });

but I don't see any data processed in the table.

kthorngren · June 2019

In that example the 0 and other numbers are referencing an array elements. Your data structure doesn't have arrays. You are still in the same situation as before. Take a look at the ajax tab in that example. You will see that each row has the same structure, ie, each row as an hr object, etc.

Datatables expects your data to look more like this:

{
      "data": [{
              "name": canada",
              "at": "22",
              "lat": 25
          }
      }, {
              "name": "boston",
              "at": "30",
              "lat": 35
          }
      }],
      "label": "3344"
  }

You columns definition would look more like this:

               "columns": [{
                   "data": "name",
               }, {
                   "data": "at",
               }, {
                   "data": "lat",
               }],

When the data is loaded Datatables will iterate through each element in the data array. Datatables doesn't directly support your data structure.

However, after thinking about it, you can use a function with columns.data. Using the Object.keys() method you could make your data structure work. For the first column you will need to get the object key then for the other columns you will need to get the value of each desired key. For example:
http://live.datatables.net/tusaroqa/1/edit

This way you won't need to preprocess the data like I showed before. Hope this helps.

Kevin

ycusoy · June 2019

the more I dive in and learn the examples you give, the more I want to explore the js in the datatable. very interesting to add ideas and develop insights about JS. thanks again for the help. greetings from me.

ycusoy · June 2019

a little extra if you switch to json from the url.
toast

$(document).ready(function() {
    var table = $('#example').DataTable({
        "ajax": {
            "url": "link data from url",
            "dataSrc": "data"
        },
        "columns": [{
            "data": function(row, type, val, meta) {
                return Object.keys(row)[0]; //object of tree
            },
        }, {
            "data": function(row, type, val, meta) {
                return row[Object.keys(row)[0]].at; //1s tree
            },
        }, {
            "data": function(row, type, val, meta) {
                return row[Object.keys(row)[0]].lat;//2nd tree
            },
        }],
    });
});

thank for kevin

ycusoy · June 2019

And how if json data like this

{
            "data": {
                "AS": [
                    ["Boston", "15", "15", "center", "80.2%", "north"],
                    ["DC", "6", "6", "left", "0.12%", "south"]
                ],
                "England": [
                    ["Burn", "15", "15", "right", "80.2%", "west"],
                    ["Listle", "6", "6", "center", "0.12%", "east"]
                ],

            }
        }

ycusoy · June 2019

i try same ex on top but not change. Why?

"columns": [{
            "data": function(row, type, val, meta) {
                return Object.keys(row)[0]; 
            },
        }, {
            "data": function(row, type, val, meta) {
                return row[Object.keys(row)[0]].at; 
            },
        }, {
            "data": function(row, type, val, meta) {
                return row[Object.keys(row)[0]].lat;
            },
        }],

ycusoy · June 2019

in edit mode http://live.datatables.net/wujozice/1/edit

kthorngren · June 2019

                "AS": [
                    ["Boston", "15", "15", "center", "80.2%", "north"],
                    ["DC", "6", "6", "left", "0.12%", "south"]
                ],

This is array based data not object based. You will need to access using techniques for an array. I think it would be a bit complicated depending on how you want the data displayed. If you want Boston to be one row and DC to be another then the above technique won't work as that array would be assigned to one row.

It would be better to return the data in a structure that Datatables supports.
https://datatables.net/manual/data/#Data-source-types

Kevin

ycusoy · June 2019

i try leave blank dataSrc and column data: data[0] cant do something. I am confused by the separation of the sign [ or { in data. because in fact every change in the sign also changes the order.

ycusoy · June 2019

finally I gave up. after several times trying and learning from several forums but found no answer there. the last time I was forced to exit the column (I don't think the data will be processed in dataTable.) and start from the ajax line. I know it's not a solution. until now I was forced to manually write the data and only use the css dataTable without js.

how to get data from json with tree format (2)

how to get data from json with tree format (2)

|country | prov | port | name

Answers

Howdy, Stranger!

Categories

DataTables

how to get data from json with tree format (2)

how to get data from json with tree format (2)

|country | prov | port | name

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables