i have js code like this
var data = {
"items": [
{
"src": "xxx",
"url": "xxx",
"ttl": "xxx%"
},
]};
$.each(data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
its work perfectly but i want replace var data ={xxx} with import url from github
i have try this code but not work :)
$.getJSON('https://raw.githubusercontent.com/user/lokal.json', data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
and this is my json
var data = {
"items": [
{
"src": "https://xxx",
"url": "https://xxx",
"ttl": "METRO TV"
}
]};
plzz help me
You are using .getJSON incorrectly.
.getJSON will return data and you need to use that data to loop over and process.
Check this out: .getJSON
Following code should work for you:
$.getJSON('https://raw.githubusercontent.com/firzi15/stb21/main/lokal.json', function (data) {
$.each(data.items, function(i, f) {
$('ul').append('<li class="scroll-nav"><img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
});
this is for you reference. you need to loop through items from your json data.
Demo https://jsbin.com/nicacux/edit?html,js,console,output
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<ul></ul>
</body>
</html>
JS
$(document).ready(function() {
$.getJSON('https://jsonblob.com/api/1049293810068373504', data.items, function(i, f) {
$.each(i.items, function(j, v) {
console.log(v, f);
$('ul').append('<li class="scroll-nav">' + v.ttl + '<img class="squareBig" src="' + f.src + '" download="' + f.ttl + '"></img></li>');
});
});
});
Related
I'm using custom html for a rally app to query and return a list of objects with their attachments. Works well for what I'm doing, but although on screen in Rally I can click the name and it's a link to the attachment, when I grab the list and paste it into excel I end up with just the name of the attachment and I really need a link to the attachment.
Can anyone help me with this html so that it returns the actual url in Rally rather than the name with the url behind it? See these imagesenter image description here. The top represents the current results whereas the bottom represents the desired results.
<html>
<head>
<title>Story Table</title>
<meta name="Name" content="Stories with Attachments" />
<meta name="Version" content="2014.2" />
<meta name="Vendor" content="Rally Software" />
<script type="text/javascript" src="https://rally1.rallydev.com/apps/1.32/sdk.js"></script>
<script type="text/javascript">
var table = null;
function tableExample() {
var rallyDataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
function itemQuery() {
var queryObject = {
key: 'theItems',
type: iType,
fetch: 'FormattedID,Name,State,ScheduleState,Description,Attachments,ObjectID',
query: Qvalue
};
rallyDataSource.findAll(queryObject, populateTable);
}
function populateTable(results) {
if (table) {
table.destroy();
}
var col3 = 'ScheduleState';
if (iType == 'task') {
col3 = 'State';
}
var tableDiv = document.getElementById('aDiv');
var config = { 'columnKeys' : ['FormattedID', 'Name', col3, 'Attachments'],
'columnHeaders' : ['FormattedID', 'Name', col3, 'Attachments'],
'columnWidths' : ['100px', '400px', '85px', '300px']
};
table = new rally.sdk.ui.Table(config);
table.addRows(results.theItems);
for (i=0;i<results.theItems.length;i++) {
myStory = results.theItems[i];
myStoryURL = rally.sdk.util.Context.getServerInfo().getUrl()+"/#/" + '__PROJECT_OID__' + "/detail/"+ iType + "/"+myStory.ObjectID;
myStoryHTML = "<div><a href='" + myStoryURL + "' target='_top'> " +
myStory.FormattedID + "</a></div>";
myAttachments = results.theItems[i].Attachments;
myAttachmentHTML = "";
for (j=0;j<myAttachments.length;j++) {
myAttachmentOID = myAttachments[j].ObjectID;
myAttachmentName = myAttachments[j].Name;
myAttachmentURL = rally.sdk.util.Context.getServerInfo().getSlmUrl()+"/attachment/"+
myAttachmentOID + "/" + myAttachmentName;
myAttachmentHTML += "<div><a href='" + myAttachmentURL + "'>" +
myAttachmentName + "</a></div>";
}
table.setCell(i, 3, myAttachmentHTML);
table.setCell(i, 0, myStoryHTML);
}
table.display(tableDiv);
};
itemQuery();
}
rally.addOnLoad(tableExample);
</script>
<script type="text/javascript">
var Qvalue = '';
function textBoxChanged(tb, args) {
Qvalue = args.value;
}
function Qbox() {
var config = {
label : 'Query String: ',
value : '',
width: 500,
showLabel: true
};
var textBox = new rally.sdk.ui.basic.TextBox(config);
textBox.display("textbox", textBoxChanged);
}
rally.addOnLoad(Qbox);
</script>
<script type="text/javascript">
var iType = 'hierarchicalrequirement';
function typeSelect() {
function onChanged(c, args) {
iType = args.value;
}
var config = {
radios: [{label:"Stories", value:"hierarchicalrequirement"},{label:"Defects",value:"defect"},{label:"Tasks",value:"task"},{label:"Test Cases",value:"testcase"}],
labelPosition: "after",
rememberChecked: false,
defaultValue: "hierarchicalrequirement",
groupName: "itemTypes"
};
var radioButtonGroup = new rally.sdk.ui.basic.RadioButtonGroup(config);
radioButtonGroup.display("itemGroup", onChanged);
}
rally.addOnLoad(typeSelect);
</script>
</head>
<body>
<p><div id="itemGroup"></div><span id="textbox"></span>
<button onclick="tableExample()">Refresh</button>
Query Help
<br></p>
<div id="aDiv" style="overflow-y: auto;"></div>
</body>
</html>
I'm assuming you still want to be able to click on the attachment links within the app.
So try replacing this line of code:
myAttachmentHTML += "<div><a href='" + myAttachmentURL + "'>" + myAttachmentName + "</a></div>";
With this:
myAttachmentHTML += "<div><a href='" + myAttachmentURL + "'>" + myAttachmentURL + "</a></div>";
<html>
<head>
<title>Vehicle Smart Sample</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form id="vehicle-smart-sample-form">
<label for="reg">Enter your reg</label>
<input type="text" id="reg"/>
<button type="submit">Search</button>
</form>
<div id="results">
Results will appear here.
</div>
</body>
<script type="text/javascript">
var myAppId = "<REPLACE-WITH-YOUR-API-KEY!>";
$(document).ready(function () {
$("#vehicle-smart-sample-form").submit(function (e) {
e.preventDefault();
var reg = $("#reg").val();
$.ajax({
"async": true,
"crossDomain": true,
"url": "https://api.vehiclesmart.com/rest/vehicleData?reg=" + reg + "&isRefreshing=false&appid="+myAppId,
"method": "GET",
"headers": {
"Content-Type": "application/text",
"Accept": "application/json",
"Cache-Control": "no-cache"
}
}).done(function (response) {
console.log(response);
if (response && response.Success) {
$("#results").html(
"<p>Make:" + response.VehicleDetails.Make + "</p>" +
"<p>Model:" + response.VehicleDetails.Model + "</p>" +
"<p>Taxed:" + response.VehicleDetails.Taxed + "</p>" +
"<p>Motd:" + response.VehicleDetails.Motd + "</p>"
);
} else {
$("#results").html(
"<p>ERROR: "+response.ServiceMessage+"</p>"
);
}
});
});
});
</script>
</html>
Now the problem is that they have given me notice that NOTE - You should not put your API key in your HTML / JavaScript then where I put the API key to get the values which I need
and I want to implement it in Wordpress do I need still PHP code to get the result
You will not be able to hide this key in your Javascript code, the only way to do it is to wrap your request with PHP or any other Back-End technology.
I am trying to display the "students" data in a table with their SRN, firstName, surName and allocated group. I am also trying to display their tutorial group from the "groups" data based on students SRN.
This is my HTML file:
<!DOCTYPE html>
<html>
<head>
<meta charset=UTF-8>
<title>Student groups</title>
<link rel="stylesheet" type="text/css" href="app.css">
<script type="text/javascript" src="displayStudents.js"></script>
<script type="text/javascript">
var studentsListJSON ;
function getStudentsJSON() {
makeRequest('http://homepages.herts.ac.uk/~comqgrs/ads/moduleGroups.php?moduleCode=6com9051');
}
function makeRequest(url) {
console.log("Making Request to..." + url);
httpRequest = new XMLHttpRequest();
if (!httpRequest) {
console.log('Giving up. Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = processContents;
httpRequest.open('GET', url);
httpRequest.send();
}
function processContents() {
console.log("Call back to process contence: state = " + httpRequest.readyState + "; status = " + httpRequest.status);
if (httpRequest.readyState === XMLHttpRequest.DONE) {
if (httpRequest.status === 200) {
console.log("request returned, processing data... \n" + httpRequest.responseText);
studentsListJSON = JSON.parse(httpRequest.responseText);
displayStudents();
} else {
console.log('There was a problem with the request.');
}
}
}
</script>
</head>
<body>
<h1>Student Groups for 6COM9051: More Web Scripting</h1>
<h2>Selected Students</h2>
<p>Lets go ... display the Students!</p>
<div id="studentsList"></div>
</body>
</html>
This is my JS file:
function displayStudents() {
var studentsListHTML = '<table id="studentsTable"><thead><tr><th>SRN</th><th>Firstname</th><th>Lastname</th><th>Allocated Group</th></tr></thead>'
for (var studentsName = '"students"' in studentsListJSON) {
var students = studentsListJSON[studentsName];
var studentHTML = '<tr><td>' + students.SRN + '</td><td>' + students.firstName + '</td><td>' + students.lastName + '</td><td>' + students.allocatedGroup + '</td></tr>';
studentsListHTML += studentHTML;
}
studentsListHTML += '</table>';
document.getElementById('studentsList').innerHTML=studentsListHTML;
}
I need to have the data in a table as the user opens the page on a browser and have a search bar so that the user can search for any of the data displayed in the table.
Try changing the displayStudents() method to :
function displayStudents() {
var studentsListHTML = '<table id="studentsTable"><thead><tr><th>SRN</th><th>Firstname</th><th>Lastname</th><th>Allocated Group</th></tr></thead>'
for (var studentSRN in studentsListJSON.students) {
var student = studentsListJSON.students[studentSRN];
var studentHTML = '<tr><td>' + studentSRN + '</td><td>' + student.firstName + '</td><td>' + student.lastName + '</td><td>' + student.allocatedGroup + '</td></tr>';
studentsListHTML += studentHTML;
}
studentsListHTML += '</table>';
document.getElementById('studentsList').innerHTML=studentsListHTML;
}
Note the line (line 5) - var student = studentsListJSON.students[studentSRN];
You need to use the studenSRN as a key to access the corresponding Student in the studentsListJSON.students dictionary.
How do I extract the odds value from this
JSON File and append it to a html-document?
[{"id":"128995",
"home":"RB Leipzig",
"away":"FC Heidenheim",
"homeLogo":"36360.png","awayLogo":"5885.png",
"url":"",
"odds1":"1.47","
oddsx":"4.39",
"odds2":"8.40"}]
HTML:
<html>
<head>
/*script src*/
</head>
<body>
<span id="odds"></span> /*output value from json odds */
</body>
</html>
I've tried something like this:
<script type="text/javascript">
$(function() {
$.getJSON( "http://myJson.json", function( data ) {
var items = [];
items.push( "<span>"+ data.odds1 + data.odds2 + "</span><br />" );
});
});
</script>
I want to extract odds1 oddsx odds2 and put those values into a HTML file.
Any help would be much appreciated!
This should work, if you are willing to use something like jQuery.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JSON TEST</title>
<meta name="generator" content="BBEdit 11.5" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js">
</script>
<script type="text/javascript">
$(function() {
$.getJSON( "http://pathto/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<span id='" + key + "'>" + key + ": " + val + "</span><br />" );
});
$( "<div/>", {
"class": "my-new-list",
html: "<p>Summary of JSON data:</p>" + items.join( "" )
}).appendTo( "body" );
$("#odds").html("odds1: " + data.odds1 + ", oddsx: " + data.oddsx + ", odds2: " + data.odds2);
});
});
</script>
</head>
<body>
<span id="odds"></span>
</body>
</html>
JSON file
{"id":"128995","home":"RB Leipzig","away":"FC Heidenheim","homeLogo":"36360.png","awayLogo":"5885.png","url":"","odds1":"1.47","oddsx":"4.39","odds2":"8.40"}
try this
<script id="myJson" type="application/json">
{
"id":"128995",
"home":"RB Leipzig",
"away":"FC Heidenheim",
"homeLogo":"36360.png","awayLogo":"5885.png",
"url":"",
"odds1":"1.47",
"oddsx":"4.39",
"odds2":"8.40"
}
</script>
<script type="text/javascript">
$(function() {
var x = JSON.parse($('#myJson').html());
console.log(x.odds1);
console.log(x.odds2);
console.log(x.oddsx);
});
</script>
I want to take chrome extension tab information (title, url) and pass to a php page on my server. I have it displaying the information but when I try to write an iframe with the information I can't get the information to the .php page.
Is there a better way to do this? Thanks!
{
"name": "XXXXXX",
"version": "1.0",
"description": "Test.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
},
"permissions": [
"tabs",
"http://www.xxxxxxxx.com/*",
"bookmarks"
]
}
<html>
<head>
<style type="text/css">
body {width:100; height:50;}
</style>
<script language="Javascript">
chrome.tabs.getSelected(null,function(tab) {
var tablink = tab.url;
var tabtitle = tab.title;
alert(tablink);
alert(tabtitle);
document.write('<iframe src=http://www.xxxxxxxx.com/index.php?link=' + tablink + '&title=' + tabtitle + 'width=100 height=50 frameborder=0 scrolling=no');
});
</script>
</head>
<body>
</body>
</html>
I figured out a solution.
<html>
<head>
<style type="text/css">
body {width:100; height:50;}
</style>
<script language="Javascript">
chrome.tabs.getSelected(null,function(tab) {
var tablink = tab.url;
var tabtitle = tab.title;
if (tablink != "")
{
var url = "http://www.xxxxxxxx.com/index.php";
document.getElementById("phpcontent").innerHTML = "";
document.getElementById("phpcontent").innerHTML += "<iframe src='" + url + "?link=" + tablink + "&title=" + tabtitle + "' width='100' height='50' frameborder='0' scrolling='no'></iframe>";
}
else
{
exit();
}
});
</script>
</head>
<body>
<span id="phpcontent"></span>
</body>
</html>