Ajax example about columns HOT 7 CLOSED

Julie,
I can't be certain without looking at your code (feel free to send your code and I will take a look), but my thought would be to make sure that your ajax call is returning proper JSON and that you are not receiving an error.

Let me know if you have any more questions.
Michael

from columns.

Wow, thanks for the quick reply - although I may be over my head. I was able to get the inline to work by basically merging the two examples you had:

But I'm stumped as to making this ajax code work with the script or even if I use this code with the original initializing script. I know I need the URL to point to my data, but I have a feeling I am messing up with the "example2 = " line of code and need to change that.

$.ajax({
url:'data.json',
dataType: 'json',
success: function(json) {
example3 = $('#example3').columns({
data:json,
schema: [
{"header":"ID", "key":"id", "template":"000{{id}}"},
{"header":"Name", "key":"name"},
{"header":"Email", "key":"email", "template":'{{email}}'},
{"header":"Gender", "key":"gender"}
]

      }); 
  }

});

I'm working in this cart Americommerce, and the person I was building the table for found your code and suggested it. If need be, I can use the inline code - it's just 600 lines, and I'd rather have it in a json file.

Like I said, I am very new to this - and do well piecing things together, but not writing code from scratch! Feel free to tell me I know too little to help!!

Julie :)

On Jan 5, 2015, at 10:17 PM, Michael Eisenbraun [email protected] wrote:

Julie,
I can't be certain without looking at your code (feel free to send your code and I will take a look), but my thought would be to make sure that your ajax call is returning proper JSON and that you are not receiving an error.

Let me know if you have any more questions.
Michael

—
Reply to this email directly or view it on GitHub.

from columns.

Julie,
I will try to explain how to use Columns in a little more detail, and hopefully that will help.

Columns Initialization: Below is the structure for using Columns.

Variable for Columns Object  =  $(Columns Container).columns({
    data: Columns Data,
    schema: Columns Schema
});

Columns Object: All the data, elements and assets are stored for this specific instances is stored in the Columns Object. When Columns is initialized it returns the Columns Object. Although, not required it is common practice to set the Columns Object to a variable so that is can be easily accessed for later use.

Columns Container: The DOM Element or location where the Columns Table and associated controls will be inserted on the page.

Columns Data: Columns Data must be an Array of Objects in standard JSON formatting. The data can be set in three different ways.

    Inline: 
        $(Columns).columns {(
            data: [{"col1":"row1", "col2":"row1"}, {"col1":"row2", “col2":"row2"}]
        });

    Variable: 
        var json = [{"col1":"row1", "col2":"row1"}, {"col1":"row2", “col2”:”row2"}];

        $(Columns).columns {(
            data: json
        });

    External File:
        Content of data.json: 
        [{"col1":"row1", "col2":"row1"}, {"col1":"row2", “col2”:”row2”}]

        $.ajax({
            url: “data.json”,
            dataType: “json”,
            success: function(json) {
                $(Columns).columns {(
                    data: json
                });
            },
            error: function() {
                alert(‘something went wrong’);
            }
        });

Columns Schema: Columns Schema is an blueprint for Columns for building the Columns Table. The Columns Schema must be an array of objects. Each object must contain a “header” and “key” key. Header is a string that will become the header for that specific column in the Columns Table. Key is the name of the key found in the Columns Data. The order that objects appear in the array is the order that columns will appear in the Columns Table. NOTE: If no schema is provided during initialization, Columns will create a schema based on the key value pairs found in the Columns Data.

Example:

    $(Columns).columns {(
        data: [{"col1":"row1", "col2":"row1"}, {"col1":"row2", “col2”:”row2"}],
        schema: [
            {“header”:”Column 1”, “key”: “col1”},
            {“header”:”Column 2”, “key”: “col2”}
        ]
    });

I hope this helps. Please let me know if you have anymore questions.

Thanks,
Michael

from columns.

Hi, and sorry for reviving an old issue. As the original poster, I am new on this jquery and decided to try "pulling" json data into nice data table.This is how my code look like:

It return an error ; expected identifier, string or number. What did I do wrong here?

from columns.

Ayeven,
That type of error is common with a trailing comma or improporly formatted object or array.

Make sure that the json you trying to import is valid, you check it by going to http://jsonlint.com/.

You also have a trailing comma after data:json which can be a problem with some browser, specifically IE.

Let me know if you still having problems.

Michael

from columns.

So, after few trial and error. I think the script structure is fine, but the JSON data now is the issue. New error come out is ' The "data" parameter must be an array'. I did example with your JSON data and it work fine, but when it come to what I'm about to digging, the error come out. If you want to look at the JSON data ; https://raw.githubusercontent.com/Deathmax/bravefrontier_data/master/jp/items.json
Any solution you recommend?

from columns.

The JSON structure you are using is not compatible with Columns. This is a limitation of the plugin that I have been meaning to fix.

I could have fix out this weekend, but until then below is structure the JSON must be in to work with the current version of Columns:

INCORRECT:

{
    "10000": {
        "desc": "エルガイアの各地で一般的に生息している回復薬の素材となる薬草", 
        "id": 10000, 
        "max_stack": 99, 
        "name": "緑壮草", 
        "rarity": 3, 
        "sell_price": 3, 
        "thumbnail": "item_thum_102.png", 
        "type": "material"
    }, 
    "10001": {
        "desc": "エルガイア北部に自生する回復効果の高い貴重な薬草", 
        "id": 10001, 
        "max_stack": 99, 
        "name": "青胆草", 
        "rarity": 3, 
        "sell_price": 10, 
        "thumbnail": "item_thum_101.png", 
        "type": "material"
    }, 
}

CORRECT

[
    {
        "desc": "エルガイアの各地で一般的に生息している回復薬の素材となる薬草", 
        "id": 10000, 
        "max_stack": 99, 
        "name": "緑壮草", 
        "rarity": 3, 
        "sell_price": 3, 
        "thumbnail": "item_thum_102.png", 
        "type": "material"
    }, 
    {
        "desc": "エルガイア北部に自生する回復効果の高い貴重な薬草", 
        "id": 10001, 
        "max_stack": 99, 
        "name": "青胆草", 
        "rarity": 3, 
        "sell_price": 10, 
        "thumbnail": "item_thum_101.png", 
        "type": "material"
    }, 
]

from columns.