shabeer-ali-m / jput Goto Github PK

Hi, I just want to ask if its possible to put the parse json into like 4 column and 3 rows? at the moment they are all parsing on rows.

Thanks.

Hi !
Love this plugin, but i've encountered a problem when setting multiple img-src's from JSON data.
As we know having the jsrc rather than src attribute will ensure that the browser won't try and load the image from the server before the json-data is ready.

Example JSON :
jPut.list.data = [{"name":"data1",
"icon":MODEL.staticUri+"/icons/icon_data1.png",
"currency":MODEL.staticUri+"/icons/ico_coins.png"},
"name":"data2",
"icon":MODEL.staticUri+"/icons/icon_data2.png",
"currency":MODEL.staticUri+"/icons/ico_bills.png"}];

Template html:

The second (#currency_icon) jsrc gets ignored. And when changing the 'jsrc' to 'src' it will work just fine, except that gets hit for the ressource : 'http://example.com/{{json.currency}}'.

Any ideas ? Or if you can just provide an un-minified version of the jput-2.js, then i can look into this myself :-)

Hi,
I'm studying your plugin but i was stocked on this issue on how to convert my sample json format to html, please see my sample json data below.

From AUTHOR, maintainers, licenses line there's a two object that i need to display, please can you help me how figure out. I find helpful this plugin but there's no example source like this my issue.

I'm hoping to hear from you soon.

HTML page:

<!--jPut HTML Template (it will he hidden)-->
<div jput="details">
    <h3>{{headername}}</h3>
    <ul>
        <li>Title: {{title}}</li>
        <li>Description: {{description}}</li>
        <li>Keywords: {{keywords}}</li>
        <li>Version: {{version}}</li>
        <li><a href="{{url}}">{{authorname}}</a></li>
    </ul>
</div>

<div id="detailsShow"></div>

json DATA:
{
"info":[
{
"headername": "json-table",
"title": "json-table",
"description": "jQuery plugin for rendering custom tables from JSON data.",
"keywords": ["table", "json", "ui"],
"version": "0.1.3",
"author": [{
"authorname": "Klaus Ganser",
"url": "http://kganser.com"
}],
"maintainers": [{
"assname": "Klaus Ganser",
"url": "http://kganser.com"
}],
"licenses": [{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}],
"bugs": "https://github.com/kganser/json-table/issues",
"homepage": "http://kganser.com/json-table.html",
"docs": "http://kganser.com/json-table.html",
"dependencies": {
"jquery": ">=1.0"
}
}]
}

Hello Shabeer,

In Firefox, the initial JSON doesn't load... Any reason for that?

So that we can call directly through CDN

This is only a question but not sure where to ask it so...

In the js directory there are three jput versions:
jput.min.js
jput-2.js
jput-2.prod.js

What is source of jput.min.js? What is the correct one to use.

Thanks for help with this. I will use jput.min.js for now.

TTFN... Andrea

Hi,
I am using jPut to dynamically add rows to the cart in eshop, with image, this is the simplified template:

<tbody jput="cart" jput-jsondata='[]'>
                        <tr>
                            <td><img class="cart-img" src="@{{ json.image }}"></td>
                            <td>@{{ json.title }}</td>
                            <td>@{{ json.prices.display.price_wc }}</td>
                        </tr>
</tbody>

However because the DOM loads before javascript, the browser is creating invalid GET request to
example.com/{{ json.image }}, is there anything I could do about this?

Thank you.

Once I pull an external Json file and see it in template, how can I run other JS scripts like removing the underscore found on some Key's? I'm using the below script on a static page and it works fine...

$(window).load(function() {
$('#cityDetails').each(function() {
var $this = $(this);
$this.text($this.text().replace(/_/g, ' '));
console.log("underscore loaded");
});
});

Usage of eval(t) seems to be unsafe.
The call to eval(t) gives following warning :

On jput-2.prod.js:55

[Report Only] Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' https://maps.googleapis.com www.google-analytics.com".

Jput seems not working after the page is completely loaded via ajax.
assuming the jput.js is loaded once in the beginning .

it shows markup {{somename}} , even if i trigger jput it via .on('event') to retain its event binding .

kindly assist over this issue.

https://jsfiddle.net/Hacksli/z4b3mqn5/2/

load page - good!
click reload button - O_o value not valid
What am I doing wrong?

hi,
generating tables is not possible, if you have only tr td elements in your template div

div jput="table"
tr
td {{id}} /td
td {{url}} /td
/tr

this will return only {{id}} {{url}}

Hi,
I was wondering if there is an easy way to create multilevel list. Imagine with multidimensional json with multiple locations and multiple persons per location (you don't know those numbers before load).

{
"group": {
"name": "green",
"location": [
{
"name": "houston",
"id": "h1",
"person": [
{
"name": "person1",
"moid": "p1"
},
{
"name": "person2",
"moid": "p2"
}
]
}
]
}
}

and html:

                    <li>{{name}} 
            <ul>
                     <li>{{location.name}}
                                <ul>
                                                        <li>{{location.person.name}}</li>
                                                                                 <li>{{location.person.n.name}}</li>    
                                                             </ul>

                    </li>
                                         <li>{{location.n.name}} </li>

            </ul>                                       
        </li>
                 </ul>

I'm able to do it if I know exact number of locations like {{location.1.name}}, but not for n...

thank you

Another question arose regarding repeat.
I understand how to specify what value if the array/object has a name but how to specify when is a numbered array.

example: "cols": ["05/17/2017","$300.00","Box 1","2lbs"]

How do I specify the value in the template... it has no name?
Also can I get access to the index of the value? Would like this so I can specify a specific class.

Thanks for any help you can give me with the two questions.

TTFN... Andrea

Is there a way to use script tags rather than html for the markup so the page doesn't make empty requests for image src on load?

Example:

<script jput="template-name" type="text/x-handlebars-template">
  <div class="item">
    <h1>{{title}}</h1>
    <div class="item-body">
      {{body}}
    </div>
  </div>
</script>

Issue explained here: Prevent mustache.js templates from loading images using template syntax

I couldn't figure out an elegant way to set a checkbox status using jPut. My current workaround is

<div jput="chckboxDiv" jput-singledata="true">
        {{json.BooleanValue?'<input id=chckbx type=checkbox checked>':'<input id=chckbx type=checkbox>'}}
</div>

This works but there might be a better way to do that. Do you have any ideas?

{ "group": [ { "name": "green", "location": [ { "lname": "houston", "id": "h1", "person": [ { "pname": "person1", "moid": "p1" }, { "pname": "person2", "moid": "p2" }, { "pname": "person3", "moid": "p3" } ] }, { "lname": "houston1", "id": "h2", "test": 123, "person": [ { "pname": "person4", "moid": "p4" }, { "pname": "person4", "moid": "p5" } ] } ] } ] }

I want to show my div only if element "test" found in JSON. In this example is houston1/h2 if the element not found i want to hide it, it's possible? Or i need to use js function to check this JSON element?

Just wondering, cause I cannot find the source not minimified
Thanks

I have a situation with similar data to this demo where jRepeat of person data is being duplicated (appended) in the first list from the second location. I simply duplicated the first group (name:green) and made a second group (name:yellow). When I run the demo with an array of groups everything looks good except the nested person data from group.name.yellow gets pushed into group.name.green??

jPut-master/demo/multi_jput\data.json (index.html wasn't changed):
{
"group": [
{
"name": "green",
"location": [
{
"lname": "houston1",
"id": "h1",
"person": [
{
"pname": "person1",
"moid": "p1"
},
{
"pname": "person2",
"moid": "p2"
},
{
"pname": "person3",
"moid": "p3"
}
]
},
{
"lname": "houston2",
"id": "h2",
"person": [
{
"pname": "person4",
"moid": "p4"
},
{
"pname": "person5",
"moid": "p5"
}
]
}
]
},
{
"name": "yellow",
"location": [
{
"lname": "houston3",
"id": "h1",
"person": [
{
"pname": "person1",
"moid": "py1"
},
{
"pname": "person2",
"moid": "py2"
},
{
"pname": "person3",
"moid": "py3"
}
]
},
{
"lname": "houston4",
"id": "h2",
"person": [
{
"pname": "person4",
"moid": "py4"
},
{
"pname": "person5",
"moid": "py5"
}
]
}
]
}
]
}

WebBrowser view:

List groups

•

•
•

•

•green ◦Location Name :houston1
◦ID :h1
◾Person p1
◾Person p2
◾Person p3
◾Person py1
◾Person py2
◾Person py3
◦Location Name :houston2
◦ID :h2
◾Person p4
◾Person p5
◾Person py1
◾Person py2
◾Person py3
◾Person py4
◾Person py5

•yellow ◦Location Name :houston3
◦ID :h1
◾Person py1
◾Person py2
◾Person py3
◦Location Name :houston4
◦ID :h2
◾Person py4
◾Person py5

Is there a way I can prevent this replicated data in group.green.person data?

I want create template div for add table row. I try call jPut function with option but it not work.

<div jput="tbody_template">
 <tr>
  <td>{{json.name}}</td>
  <td>{{json.score}}</td>
 </tr>
</div>

<table border=1>
 <tbody id="tbody">
 </tbody>
</table>

var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];
$("#tbody").jPut({
    jsonData:json,
    name:"tbody_template"
});

jsfiddle : https://jsfiddle.net/win_web/4w1gwLdv/

Hi shabeer-ali-m,
I have another issue regarding multidimensional display, when i tried to pull data using yahoofeed i cant figure out how to display the specific data. Kindly see the structure below:

yahoofeed link:
http://bit.ly/1vjw0xf

jput code:

        ajax_url:'//pipes.yahoo.com/pipes/pipe.run?_id=e4e173cf75b0aa1b374b7987398d6091&_render=json&_callback=getYahooFeed',
        name:'list',     //jPut name
        dataName:'getYahooFeed', //my propose syntax (value.items)
        //ajax_type:'POST',

        error:function(msg)
        {
            alert(msg);
        }
    }); 
});

HTML code:

<div jput="list">
        <ul>
            <li>
                <a href="{{value.items.link}}"> // This is what im thinking to get the specific data from feed
                    <!--<h4 class="tit">{{title}}</h4>
                    <span class="date">{{pubDate}}</span>
                    <p class="desc">{{description}}</p>-->
                </a>
            </li>
        </ul>
    </div>
    <div id="yahooEntry"></div>

Please give some feedback or idea how to display this kind of structure.

Thank you so much!

json array 1000+ loading 4-5sec.

I want to get array value inside object in following code. how to get values array value
using jput. Please help me out.
"enums": {
"DeviceState": {
"name": "DeviceState",
"values": [
{
"name": "disconnected",
"lifetime": {
"added": { "version": { "major": 1, "minor": 0 } },
"deprecated": { "version": { "major": 1, "minor": 2 },
"removed": { "version": { "major": 1, "minor": 6 } }
}
},
{
"name": "connected",
"lifetime": {
"added": { "version": { "major": 1, "minor": 0 } },
"deprecated": { "version": { "major": 1, "minor": 6 },
"removed": { "version": { "major": 1, "minor": 8 } }
}
}
]
}

Hello,
I'm using Laravel. My view engine (Blade) is using {{ }}. Because of this jPut overlap with Laravel Blade. Can I change {{ and }} selectors with set option.