For some reason I have this huge brain fart today. >.<
I have a JSON data that I am attaching to using jQuery .data() that looks like this:
$.getJSON("names.php", function(data) {
//generate html string and append to DOM
$.each(data, function(i,item) {
var strHtml;
strHtml += '<img src="' +item.PIC + '.jpg" id="' + item.ID + '" />';
})
$('body').html(strHtml);
//attach data to image ID
$.each(data, function(i,item) {
$('#' + item.ID).data(item.ID, {
NAME: item.NAME,
PHONE: item.PHONE,
EMAIL: item.EMAIL,
ADDRESS: item.ADDRESS,
...
...
...
});
}
}
This works fine; however, it looks a little ugly and I am trying to clean it up a little mainly on this part:
$.each(data, function(i,item) {
$('#' + item.ID).data(item.ID, {
NAME: item.NAME,
PHONE: item.PHONE,
EMAIL: item.EMAIL,
ADDRESS: item.ADDRESS,
...
...
...
});
}
I am adding an array of object to the key value.
Example from http://api.jquery.com/data/
$('body').data('bar', { myType: 'test', count: 40 });
Here is my attempt to rewrite it:
$.each(data, function(i,item) {
$('#' + item.ID).data(item.ID, function(){
$.each(item) {
return i + ':' item[i];
}
})
}
Is there a cleaner way to write this?
I've also tried $('#' + item.ID).data(item.ID, JSON.stringify(data));
If you just want the full item added, with all it's properties, you can just do this:
$.each(data, function(i,item) {
$('#' + item.ID).data(item.ID, item);
});
.data() takes any value, including an object, so you might as well use the original. Also, it's more likely that you want this:
$.each(data, function(i, item) {
$('#' + item.ID).data("someKey", item);
});
Then you can use a consistent .data("someKey") to get the data back out as well, rather than using the element's own .id as the data key as well.
You can just do:
$('#' + item.ID).data(item.ID, item);
You'll still be able to access the values as expected:
$('#' + someId).data(someId).NAME;
By the way, JSON.stringify isn't a good idea because in order to read the values back again, you'll have to convert it back from a string into an object.
Try:
$('#' + item.ID).data("info", item);
Related
I want to dynamically populate a list with elements from a JSON file. The idea is to switch the test_ID in the list with the actual object from the JSON file. How do I do this?
JSON file
[
{
"id": "a",
"test": "Java",
"testDate": "2016-08-01"
},
{
"id": "b",
"test":"JavaScript",
"testDate": "2016-08-01"
}
]
jQuery
$(function(){
$.ajax({
type : 'GET',
url : 'json/data.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result) {
});
$("#test_ID").empty(); //emtpy the UL before starting
$.each(arr_json, function(i, v, d) {
$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
});
}
});
});
HTML
<li id="test_ID"></li>
I do receive a couple of errors. The Line:
$("#test_ID").append("<li id='" + v.id +'" + v.test +"' >" + v.testDate + "<li>");
gives the following error: invalid number of arguments and unclosed String literal.
I am also unsure of how to identify to specific elements in the JSON file.
Update
I would like if the list element was in this format "Java 2016-08-01" and "JavaScript 2016-08-01". Thank you!
You have a couple of errors in your javascript. See the corrected version below:
$(function(){
$.ajax({
type : 'GET',
url : 'json/data.json',
async : false,
beforeSend : function(){/*loading*/},
dataType : 'json',
success : function(result) {
$("#test_ID").empty(); //emtpy the UL before starting
// **************** correction made to the line below ***********************
$.each(result, function(i, v, d) {
// **************** correction made to the line below ***********************
$("#test_ID").append('<li id="' + v.id + '">' + v.test + ' ' + v.testDate + '</li>'); // correction made here
});
}
});
});
I did a quick fiddle. I don't quite understand what you're doing with v.test being unmarked inside the HTML tags so I did not include it. I used minimal JQuery to avoid complexity.
https://jsfiddle.net/ndx5da97/
for (record in data) {
$("#test_ID").append('<li id="' + data[record].id + '">' + data[record].testDate + '</li>');
}
Hope this helps!
I'm hoping there is a straightforward solution to this one. I'm simply trying to get the 'net_price', from my append, to use in another function.
Can anyone help at all?
JSON
$.getJSON("{{{ url('api/get-price')}}}", { id: $productId },
function(data){
if(data.prices == true){
$('#prices span').empty();
$('#prices').fadeIn(2000);
$.each(data, function(key, value){
$('.cost').append('<div>Cost: ' + value.net_price +'</div>');
});
}
});
Function where I need to replace XXXX with price:
var calc = function(currentPrice){
if(currentPrice.getPrice()==100){
this.setOptions({
maxPrice:'XXXXX'
});
};
You could make a global variable for the net price and then update the variable within your JSON call.
// Declare variable globally
var netPrice = '';
$.getJSON("{{{ url('api/get-price')}}}", { id: $productId },
function(data){
// Update variable
netPrice = value.net_price;
if(data.prices == true){
$('#prices span').empty();
$('#prices').fadeIn(2000);
$.each(data, function(key, value){
$('.cost').append('<div>Cost: ' + netPrice +'</div>');
});
}
});
May be you can do
$.each(data, function(key, value){
$('.cost').append('<div>Cost: <span class="netPrice">' + value.net_price +'</span></div>');
});
and access it from calc function:
var calc = function(currentPrice){
if(currentPrice.getPrice()==100){ // if Saturday
this.setOptions({
maxPrice: $('.cost').find('.netPrice').text()
});
};
}
Me and $.each aren't good friends, I can't seem to figure out how I should use this statement to print all my data in my JSON file. Another problem is the if statement, I tried it in many ways, but whatever I do, no data is being printed.
My JSON file
[
{
"expo":"pit",
"datum":"05.06.2011 - 05.06.2016",
"img":"images/pit_home.jpg",
"link":"exp1_index.html"
},
{
"expo":"Space Odessy 2.0",
"datum":"17.02 - 19.05.2013",
"img":"images/so_home.jpg",
"link":"exp2_index.html"
}
]
My $.getJSON script
<script type="text/javascript">
function read_json() {
$.getJSON("home.json", function(data) {
var el = document.getElementById("kome");
el.innerHTML = "<td><div class='dsc'>" + data.expo + "<br><em>" + data.datum + "</em></div></td>";
});
}
</script>
So how would I integrate the $.each statement and seperate from that, the if statement?
Try this
$.getJSON("home.json", function (data) {
var html = '',
el = document.getElementById("kome");
$.each(data, function (key, val) {
html += "<td><div class='dsc'>" + val.expo + "<br><em>" + val.datum + "</em></div></td>";
});
el.innerHTML = html;
});
Something like this?
<script type="text/javascript">
function read_json() {
$.getJSON("home.json", function(data) {
var html = '';
$.each(data, function(i, record) {
html += '' +
'<td>' +
'<a href="' + record.link + '" data-ajax="false">' +
'<img src="' + record.img + '">' +
'<div class="dsc">' +
record.expo + '<br>' +
'<em>' + record.datum + '</em>' +
'</div>' +
'</a>' +
'</td>';
});
$('#kome').html(html);
});
}
</script>
Note: I haven't tested this, so there may be a few syntax errors (mostly concerned about the quotes in the string concatenation).
I will note that you don't need jQuery's $.each for this; you can use a basic for-loop:
for (var i = 0; i < data.length; i++) {
var record = data[i];
... stuff...
}
jQuery's .each() is really useful when iterating over elements in the DOM, though. For example, if you wanted to iterate over the elements with class dsc, you could do:
$('.dsc').each(function(i, dsc) {
// Do stuff to the $(dsc) element.
});
Also, you might as well use jQuery's selectors (the $('#kome')) if you're going to use jQuery.
jQuery's API usually has solid examples for stuff; this is one such case.
$.each can iterate arrays [] or objects {}, your json contains both, so first you need to tackle array, that gives you an object on each iteration. Then you can access its properties.
jQuery each documentation
Second thing: to append to innerHTML use "+=" not "=" or you will reset html on each iteration.
var el = document.getElementById("kome");
$.getJSON('ajax/test.json', function(data) {
$.each(data, function(n, linkData) {
el.innerHTML += '' + linkData.expo + '';
});
}
So I have an array that's being pulled from a json object that I'd like to display as images in a div called #practice:
["<img src ="http://domain.com/wp-content/uploads/2012/10/random04-128x84.jpg"/>",
"<img src ="http://domain.com/wp-content/uploads/2012/10/chuck_norris_random_fact_generator_6_3957_2224_image_2578-128x84.jpg"/>"]
Here is the method I have so far...
$.getJSON('wp-content/themes/invoke-dmd/get-client-logos.php/', function (data) {
var items = [];
$.each(data, function(key, val) {
items.push('<img src ="' + val.url + '"/>');
});
console.log(items)
$('#practice').append(items);
});
It logs out the array as above... but cannot show it in the div.
How does one do this?
Try this,
$.getJSON('wp-content/themes/invoke-dmd/get-client-logos.php/', function (data) {
$.each(data, function(key, val) {
$('#practice').append('<img src ="' + val.url + '"/>');
});
});
You're trying to add the images HTML as an array, you need to add a string:
$('#practice').append(items.join(" "));
I'm doing a simple ajax query which retrieves a variable-length list of values as JSON data. I'm trying to make a list based on this data which has click-functions based on the values I got from the JSON query. I can make this work just fine by writing the onClick-methods into the HTML like this:
function loadFooList() {
var list_area = $("#sidebar");
list_area.html("<ul>")
$.ajax({
type: 'GET',
url:'/data/foo/list',
dataType: 'json',
success: function (json) {
$.each(json, function(i, item) {
var link_id = "choosesfoo" + item.id;
list_area.html(list_area.html()
+ "<li> <a href='#' onClick='alert(\"" +
link_id + "\");'>" +
item.name + "</a></li>");
});
list_area.html(list_area.html() + "</ul>");
}
});
}
I don't like writing the onClick-function into the HTML and I also want to learn how to create this same functionality via JQuery click-function.
So the problem is obviously variable-scoping. My naive attempt here obviously won't work because the variables are no longer there when the click happens:
function loadFooList2() {
var list_area = $("#sidebar");
var link_ids = Array();
list_area.html("<ul>")
$.ajax({
type: 'GET',
url:'/data/foo/list',
dataType: 'json',
success: function (json) {
$.each(json, function(i, item) {
var link_id = "choosefoo" + item.id;
list_area.html(list_area.html()
+ "<li> <a href='#' id='" + link_id + "'>"+item.name+"</a></li>");
link_ids.push(link_id);
});
list_area.html(list_area.html() + "</ul>");
for (link_index=0; link_index<link_ids.length; link_index++) {
$("#" + link_ids[link_index]).click(function() {
alert(link_ids[i]);
});
}
}
});
}
Obviously I'd like to do something else than just alert the value, but the alert-call is there as long as I can get that working and move forward.
I understand that I'll have to make some kind of handler-function to which I pass a state-variable. This works for a single value (I can store the whole link_ids array just fine, but then I don't know which of them is the right value for this link), but how would I do this for arbitrary-length lists?
Here is an example from JQuery docs which I'm trying to copy:
// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
function handler(data) {
//...
}
// add click handler and pass foobar!
$('a').click(function(){
handler(foobar);
});
// if you need the context of the original handler, use apply:
$('a').click(function(){
handler.apply(this, [foobar]);
});
And I quess the last example here, "if you need the context of the original handler..." would probably be what I want but I don't know exactly how to get there. I tried to store the current link_id value into this, use it from this in the applied function (using apply()) but I didn't succeed. The necessary values were still undefined according to FireFox. I'm using JQuery 1.3.2.
So what's the right solution for this relatively basic problem?
Use append instead of html():
function loadFooList() {
var ul = $('<ul>');
$.ajax({
type: 'GET',
url:'/data/foo/list',
dataType: 'json',
success: function (json) {
$.each(json, function(i, item) {
var link_id = "choosesfoo" + item.id;
var a = $('<a>').attr('href','#').bind('click', function(e) {
alert(link_id,item_name);
e.preventDefault();
});
$('<li>').append(a).appendTo(ul);
});
ul.appendTo('#sidebar'); // this is where the DOM injection happens
}
});
}
So the problem appears to be getting the link id associated with the link so that your click handler has access to it. Note that if it's alphanumeric it will qualify for the id attribute and you can extract it from there. If it is purely numeric, it will be an illegal id attribute. In that case, you can either use an attribute, like rel, or the jQuery.data() method to store the link id with the link. You can also simplify by using append. I'll show both examples.
var link = $("<li><a href='#' id='" + link_id + "'>" + item.name + "</a></li>";
link.click( function() {
alert( $(this).attr('id') );
});
list_area.append(link);
or (if numeric)
var link = $("<li><a href='#'>" + item.name + "</a></li>";
link.data('identifier', link_id )
.click( function() {
alert( $(this).data('identifier') );
});
list_area.append(link);
Try this:
function loadFooList() {
var list_area = $("#sidebar");
$.ajax({
type: 'GET',
url:'/data/foo/list',
dataType: 'json',
success: function (json) {
var out = '<ul>';
$.each(json, function(i, item) {
var link_id = "choosefoo" + item.id;
out +="<li><a href='#' id='" + link_id + "'>"+item.name+"</a></li>";
});
out +="</ul>"
var $out = $(out);
$out.find('a').click(function(){
var link_id = this.id;
var item_name = $(this).text();
alert(link_id);
alert(link_name);
})
list_area.html($out);
}
});
}
Using multiple appends causing the browser to redraw multiple times in a row. You only want to modify the dom once.