How do i get Data from json array? #227

okgint · 2014-11-10T20:04:29Z

I have a data:
[{"id":404,"description":"PowerEdge 6300","price":7500,"onhand":16,"supplierId":302,
"suppliers":[{"name":"DELL","webSite":"http://dell.com"}]}

i want to get suppliers.name field, how do i get that data field ?

djhvscf · 2014-11-12T01:21:10Z

You can use the bootstrap-table-flatJSON to do this.. Here an example http://wenzhixin.net.cn/p/bootstrap-table/docs/extensions.html#flatJSON and this is the data.json used by this table http://wenzhixin.net.cn/p/bootstrap-table/docs/data5.json.

djhvscf · 2014-11-12T01:21:18Z

@okgint

jl4347 · 2014-11-12T06:20:06Z

@djhvscf Hi, does this method work on JSONP type as well?

wenzhixin · 2014-11-12T07:02:21Z

Yes @jl4347, this extension supports JSONP type as well.

djhvscf · 2014-11-12T13:17:48Z

Yes, @jl4347 . If you need some help just ask for it!.

jl4347 · 2014-11-12T15:38:57Z

@wenzhixin @djhvscf
Hi,

The JSONP data I need to put in the table is of the following format：
data['results']['comments'][i]['commentBody']；
data['results']['comments'][i]['articleURL']；
data['results']['comments'][i]['display_name'];

“comments” attribute is an array of objects in the JSONP data，the three attributes above is one I need to show in the table, is it possible to do that in table？Although we can use flatoutJSON to flat out JSONP data, but I don't know how to pass the array into the table.

Thank you very much for your time and help.

djhvscf · 2014-11-12T16:27:03Z

Ok @jl4347 , I think you have to set in your table the data-flat= true and in the data-field give all the "route" to get the attribute that you want.. Like this:

<th data-field="id.id2" data-align="right" data-sortable="true">Item ID</th>
<th data-field="name.name2" data-align="center" data-sortable="true">Item Name</th>
<th data-field="price.price2.price3" data-align="" data-sortable="true">Item Price</th>

jl4347 · 2014-11-12T16:48:46Z

And how do I pass the JSONP data to the table, in the example it is like:

<table id="events-id2" data-url="data1.json" data-height="299" data-search="true" data-flat=true>

<th data-field="result.comment.commentBody" data-align="right" data-sortable="true">Comment</th>
<th data-field="result.comment.articleURL" data-align="center" data-sortable="true">Link to Article</th>
<th data-field="result.comment.display_name" data-align="" data-sortable="true">Commenter Name</th>

In other words, how do I pass the JSONP data from the javascript to the .html?

djhvscf · 2014-11-12T16:58:00Z

You can pass the data via Javascript -> http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#via-javascript-table
Or you can pass the data via data attributes -> http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#basic-table

Of course you have to set the flat attribute in true

@jl4347

jl4347 · 2014-11-12T17:13:09Z

@djhvscf
By looking at the example to pass the data via javascript, the JSONP data is essentially what we received from the url, right? So in my case of using the New York Times community API, the datafield should be:
data-url="http://api.nytimes.com/svc/community/v2/comments/random.jsonp?api-key=[my_api_key]"
Since I am using ajax to retrieve the data. That is field I pass into the .ajax url. Is this right?

BTW, the file I should download to use the flatoutJSON plugin is "flatJSON.min.js" right?

djhvscf · 2014-11-12T17:22:37Z

Yes, you're right. And the file you have to use is bootstrap-table-flatJSON.js or bootstrap-table-flatJSON.min.js..

@jl4347

djhvscf · 2014-11-12T17:26:22Z

You have to download the code from https://github.com/djhvscf/bootstrap-table-flatJSON

@jl4347

jl4347 · 2014-11-12T21:09:07Z

@djhvscf Thank you vey much, I will have a try.

djhvscf · 2014-11-12T21:32:23Z

Ok. Let me know if your code works 😄 @jl4347

jl4347 · 2014-11-13T15:40:56Z

@djhvscf
I was trying and the table is not working, I can't figure out what went wrong, could you please give me a hand?
Here is the .html file:

<html>
<head>
    <title>New York Times Commentator</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="jquery-2.1.1.min.js"></script>
    <script src="new_york_times.js"></script>
    <script src="flatJSON.min.js"></script>
    <script type="text/javascript" src="prettyprint.js"></script>
</head>
<body>
    <h1 align="center"> New York Times Commentator </h1>

    <input type = "button" value="GetComment" onclick="getRanComment();"/>
    <div id="CommentBox">
    </div>

    <table id="events-id2" data-url="http://api.nytimes.com/svc/community/v2/comments/random.jsonp?api-key=my-key" data-height="299" data-search="true" data-flat="true">
        <thead>
            <tr>
                <!-- <th data-field="state" data-checkbox="true"></th> -->
                <th data-field="results.comments.display_name" data-sortable="false">Commenter Name</th>
                <th data-field="results.comments.commentBody" data-sortable="false">Comment</th>
                <th data-field="results.comments.articleURL" data-sortable="false">Article URL</th>
                <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Item Operate</th>
            </tr>
        </thead>
    </table>
    <script>
        function operateFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" title="Like">',
                    '<i class="glyphicon glyphicon-heart"></i>',
                '</a>',
                '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
                    '<i class="glyphicon glyphicon-edit"></i>',
                '</a>',
                '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
                    '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .like': function (e, value, row, index) {
                alert('You click like icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .edit': function (e, value, row, index) {
                alert('You click edit icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .remove': function (e, value, row, index) {
                alert('You click remove icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            }
        };
    </script>

</body>
</html>

This is the .js script I used to retrieve data:

function getRanComment(){

    $("#CommentBox").empty();
    var community_key="my-key";
    var url = 'http://api.nytimes.com/svc/community/v2/comments/random.jsonp?api-key='+community_key;

    $.ajax({

        'url': url,
        'method': 'GET',
        'cache': true,
        'dataType': 'jsonp',
        'success': function(data, textStats, XMLHttpRequest){
            console.log(data);

            // var output = prettyPrint(data);

            var len = data['results']['comments'].length;
            var comment;
            var articleURL;
            var display_name;

            for (var i = 0; i < len; i++) {
                comment = data['results']['comments'][i]['commentBody']+"<br>";
                articleURL = "<a href=\""+data['results']['comments'][i]['articleURL']+"\">Link to Article</a><br>";
                display_name = data['results']['comments'][i]['display_name'];

                $("#CommentBox").append(comment);
                $("#CommentBox").append(articleURL);
                console.log(comment);
            };

            // var comment = data['results']['comments'][0]['commentBody'];
            // console.log(comment);

        }

    });

}

djhvscf · 2014-11-13T16:18:47Z

Hi @jl4347 did you download this js file?? -> https://github.com/djhvscf/bootstrap-table-flatJSON I think that the first problem is that..

okgint · 2014-11-13T16:24:47Z

hi @djhvscf does this plugins work for flat json array?
Json data ex:
{"id":121,"name":"music","products":[{"id":230,"name":"one","price":1000,"active":"Y"}]}

How do i get products.price ?

Thanx for your time

jl4347 · 2014-11-13T16:26:35Z

@djhvscf
I have downloaded it again, and this time it tell me that " Uncaught TypeError: Cannot read property 'defaults' of undefinedbootstrap-table-flatJSON.min.js:6 (anonymous function)bootstrap-table-flatJSON.min.js:6 (anonymous function)"

djhvscf · 2014-11-13T16:28:24Z

Are you calling this script in the correct order?? I mean first the bootstrap-table.js and then the extension?? @jl4347

djhvscf · 2014-11-13T16:30:47Z

@okgint You have to use the data-flat = true if you are using the tablle config with data attributes or you have to pass the flat parameter eith true if your config is via javascript.. Then you can get the price like that -> products.price

okgint · 2014-11-13T17:19:14Z

@djhvscf your plugin still doesn't work. i have to do it manually by putting data-formatter and iterating the array.

djhvscf · 2014-11-13T17:22:21Z

Ok. Let me know why the plugin doesn't work @okgint

jl4347 · 2014-11-13T18:11:05Z

@djhvscf
What is the extension script I need to call?

djhvscf · 2014-11-13T19:26:17Z

This one -> http://wenzhixin.net.cn/p/bootstrap-table/docs/extensions.html#flatJSON @jl4347

jl4347 · 2014-11-13T19:51:06Z

@djhvscf
Yeah, but that one only directs to you extension repo, I downloaded both the files "bootstrap-table-flatJSON.js" and "bootstrap-table-flatJSON.min.js" and it throws me the same error->" Uncaught TypeError: Cannot read property 'defaults' of undefinedbootstrap-table-flatJSON.min.js:6 (anonymous function)bootstrap-table-flatJSON.min.js:6 (anonymous function)"

I have no idea what do I need now....

djhvscf · 2014-11-13T20:01:05Z

I tested the js file and it is working.. Can you paste your code..?? I need to review it @jl4347

jl4347 · 2014-11-13T20:04:31Z

Here's my code:

<html>
<head>
    <title>New York Times Commentator</title>
    <link href="bootstrap.min.css" rel="stylesheet">
    <script src="jquery-2.1.1.min.js"></script>
    <script src="new_york_times.js"></script>
    <!-- <script src="bootstrap-table-flatJSON.js"></script> -->
    <script src="bootstrap-table-flatJSON.min.js"></script>
    <script src="bootstrap-table-flatJSON.js"></script>
    <script type="text/javascript" src="prettyprint.js"></script>
</head>
<body>
    <h1 align="center"> New York Times Commentator </h1>

    <input type = "button" value="GetComment" onclick="getRanComment();"/>
    <div id="CommentBox">
        <table id="CommentTable" border="2" cellspacing="1" style="border-collapse: collapse" width="80%" id="Default_table">
            <tr>
                <td>UserName</td>
                <td>Comment</td>
                <td>Link to Article</td>
                <td>Rating</td>
            </tr>
        </table>
    </div>



    <table id="events-id2" data-url="http://api.nytimes.com/svc/community/v2/comments/random.jsonp?api-key=mykey" data-height="299" data-search="true" data-flat="true">
        <thead>
            <tr>
                <th data-field="state" data-checkbox="true"></th>
                <th data-field="results.comments.display_name" data-sortable="false">Commenter Name</th>
                <th data-field="results.comments.commentBody" data-sortable="false">Comment</th>
                <th data-field="results.comments.articleURL" data-sortable="false">Article URL</th>
                <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Item Operate</th>
            </tr>
        </thead>
    </table>
    <script>
        function operateFormatter(value, row, index) {
            return [
                '<a class="like" href="javascript:void(0)" title="Like">',
                    '<i class="glyphicon glyphicon-heart"></i>',
                '</a>',
                '<a class="edit ml10" href="javascript:void(0)" title="Edit">',
                    '<i class="glyphicon glyphicon-edit"></i>',
                '</a>',
                '<a class="remove ml10" href="javascript:void(0)" title="Remove">',
                    '<i class="glyphicon glyphicon-remove"></i>',
                '</a>'
            ].join('');
        }

        window.operateEvents = {
            'click .like': function (e, value, row, index) {
                alert('You click like icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .edit': function (e, value, row, index) {
                alert('You click edit icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            },
            'click .remove': function (e, value, row, index) {
                alert('You click remove icon, row: ' + JSON.stringify(row));
                console.log(value, row, index);
            }
        };
    </script>

</body>
</html>

And the js code:

function getRanComment(){

    $("#CommentBox").empty();
    var community_key="mykey";
    var url = 'http://api.nytimes.com/svc/community/v2/comments/random.jsonp?api-key='+community_key;

    $.ajax({

        'url': url,
        'method': 'GET',
        'cache': true,
        'dataType': 'jsonp',
        'success': function(data, textStats, XMLHttpRequest){
            console.log(data);

            // var output = prettyPrint(data);

            var len = data['results']['comments'].length;
            var comment;
            var articleURL;
            var display_name;

            for (var i = 0; i < len; i++) {
                // comment = data['results']['comments'][i]['commentBody']+"<br>";
                // articleURL = "<a href=\""+data['results']['comments'][i]['articleURL']+"\">Link to Article</a><br>";
                // display_name = data['results']['comments'][i]['display_name'];

                display_name = "<tr><td>"+data['results']['comments'][i]['display_name']+"</td>";
                comment = "<td>"+data['results']['comments'][i]['commentBody']+"</td>";
                articleURL = "<td><a href=\""+data['results']['comments'][i]['articleURL']+"\">Link to Article</a></td></tr>";


                $("#CommentTable").append(display_name);
                $("#CommentTable").append(comment);
                $("#CommentTable").append(articleURL);
                console.log(comment);
            };

            // var comment = data['results']['comments'][0]['commentBody'];
            // console.log(comment);

        }

    });

}

djhvscf · 2014-11-13T20:13:37Z

I don't see the call for bootstrap-table.js.. @jl4347

jl4347 · 2014-11-13T20:32:22Z

@djhvscf
I don't see the file "bootstrap-table.js" in your repo????

djhvscf · 2014-11-13T20:52:58Z

Are you using this bootstrap plugin https://github.com/wenzhixin/bootstrap-table??

djhvscf · 2014-11-13T21:00:08Z

Really I don´t understand what you want to do.. @jl4347

jl4347 · 2014-11-13T21:03:55Z

OK, I got rid of the errors, but still the table didn't catch anything.

What I am trying to do use .ajax to retrieve data from the new york times and then pass the JSONP data to the table to display.

djhvscf · 2014-11-13T21:12:52Z

Ok, first if you want to use the bootstrap-table-flatJSON you have to use the bootstrap-table plugin.. Now, If you want to use only the flatJSON plugin you have to use this js file -> https://github.com/djhvscf/flatJSON/releases/tag/v1.2.0

jl4347 · 2014-11-14T00:38:11Z

Yeah, I loaded those two files, but the bootstrap table is not catching the JSONP data

wenzhixin · 2014-11-14T01:37:54Z

Hi @jl4347, your JSONP format is XML??

jl4347 · 2014-11-14T01:41:02Z

@wenzhixin
I print the data in the console, it is just array of objects nested inside object.

wenzhixin · 2014-11-14T01:54:41Z

@jl4347 Try this:

<table ... data-response-handler="responseHandler">
...

function responseHandler(res) {
    return data.results.comments;
}

wenzhixin · 2014-11-14T02:01:15Z

@okgint Try this: products.0.price

wenzhixin · 2015-01-27T15:07:29Z

Close this issue.

cereblanco · 2015-09-17T03:14:28Z

Hi,

Can I use the flatJSON plugin to display the content of an array in one column?
Example:

data.json

[{
        "id": 1,
        "name": "GroupA",
        "members": [{
                "id": 1,
                "name": "410041234567801",
                "callerid": "09278784217"
            },{
                "id": 1,
                "name": "410041234567802",
                "callerid": "09278784218"
            },{
                "id": 1,
                "name": "410041234567803",
                "callerid": "09278784219"
            }
         ]
}]

I wanted to display all members in one column

Group Column	Members Column
GroupA	410041234567801, 410041234567802, 410041234567803,

Thanks!

djhvscf · 2015-09-17T15:31:58Z

I think you can use this example in order to get your requirement: http://issues.wenzhixin.net.cn/bootstrap-table/#issues/177.html

@cereblanco

goldnuggets24 · 2015-10-12T19:38:59Z

Just wanted to thank @djhvscf for the helpful comments here! This hugely came in handy for me. 👍

leohmoraes · 2016-07-08T15:17:37Z

Hi,

How I display the content of an array created by javascript.
Modal->Form->(Array or Json)->Update DataTable

Thanks !

wenzhixin added the question label Nov 12, 2014

wenzhixin closed this as completed Jan 27, 2015

henrysan96 mentioned this issue Apr 10, 2015

How to use data-url for JSON? #712

Closed

How do i get Data from json array? #227

How do i get Data from json array? #227

Comments

okgint commented Nov 10, 2014

djhvscf commented Nov 12, 2014

djhvscf commented Nov 12, 2014

jl4347 commented Nov 12, 2014

wenzhixin commented Nov 12, 2014

djhvscf commented Nov 12, 2014

jl4347 commented Nov 12, 2014

djhvscf commented Nov 12, 2014

jl4347 commented Nov 12, 2014

djhvscf commented Nov 12, 2014

jl4347 commented Nov 12, 2014

djhvscf commented Nov 12, 2014

djhvscf commented Nov 12, 2014

jl4347 commented Nov 12, 2014

djhvscf commented Nov 12, 2014

jl4347 commented Nov 13, 2014

djhvscf commented Nov 13, 2014

okgint commented Nov 13, 2014

jl4347 commented Nov 13, 2014

djhvscf commented Nov 13, 2014

djhvscf commented Nov 13, 2014

okgint commented Nov 13, 2014

djhvscf commented Nov 13, 2014

jl4347 commented Nov 13, 2014

djhvscf commented Nov 13, 2014

jl4347 commented Nov 13, 2014

djhvscf commented Nov 13, 2014

jl4347 commented Nov 13, 2014

djhvscf commented Nov 13, 2014

jl4347 commented Nov 13, 2014

djhvscf commented Nov 13, 2014

djhvscf commented Nov 13, 2014

jl4347 commented Nov 13, 2014

djhvscf commented Nov 13, 2014

jl4347 commented Nov 14, 2014

wenzhixin commented Nov 14, 2014

jl4347 commented Nov 14, 2014

wenzhixin commented Nov 14, 2014

wenzhixin commented Nov 14, 2014

wenzhixin commented Jan 27, 2015

cereblanco commented Sep 17, 2015

djhvscf commented Sep 17, 2015

goldnuggets24 commented Oct 12, 2015

leohmoraes commented Jul 8, 2016