I am using HTML to display my PHP JSON Encoded information but I would like to know how do I display the information in a table? I have already created the PHP which is just a simple array which shows a person's first name, surname and email.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<title></title>
</head>
<body>
<!-- this UL will be populated with the data from the php array -->
<ul></ul>
<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// call the php that has the php array which is json_encoded
$.getJSON('Test.php', function(data) {
// data will hold the php array as a javascript object
console.log(data);
$.each(data, function(key, val) {
$('ul').append('<li id="' + key + '">' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</li>');
});
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<title></title>
</head>
<body>
<!-- JSON goes to <tbody> -->
<table>
<thead>
<tr><th>Key</th><th>Name and Email</th></tr>
</thead>
<tbody>
</tbody>
</table>
<script type='text/javascript'>
$(document).ready(function(){
// call the php that has the php array which is json_encoded
$.getJSON('Test.php', function(data) {
// data will hold the php array as a javascript object
$.each(data, function(key, val) {
$('tbody').append('<tr><td>' + key + '</td><td>' + val.first_name + ' ' + val.last_name + ' ' + val.email + '</td></tr>');
});
});
});
</script>
You can append the JSON like this.
Related
<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 just wanting to output text from a json file to html, api is here: https://shopify.statuspage.io/api
function setup() {
loadJSON("https://d33g96wd23dd.statuspage.io/api/v2/summary.json", gotData, 'jsonp');
}
function gotData(data) {
var output = document.getElementById('output');
output.innerHTML = data.status + ' ' + data.description;
}
<div class="w3-container w3-center" id="output"></div>
You can use the below code if you want to render the first element of the array
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var output = document.getElementById('output');
$.getJSON( "https://d33g96wd23dd.statuspage.io/api/v2/summary.json", function( data ) {
output.innerHTML = data.components[0].status + ' ' + data.components[0].description;
});
});
</script>
</head>
<body>
<div class="w3-container w3-center" id="output"></div>
</body>
</html>
else , you can loop up your append method alternately .
Pagination through JSON Object Using Angular Js 1 and Bootstrap UI
May someone help me on how to paginate through json object with proper bootstrap displays and and uib-pagination paging functionality...
below is my app code
var app = angular
.module("app",[
"ngRoute",
"ngResource",
"ui.bootstrap"
])
.config(['$routeProvider', function($routeProvider)
{
$routeProvider
.when('/home',{
templateUrl: 'HTML/temp/home.html',
controller:'HomeCtrl'
})
.otherwise({redirectTo:'/home'});
}])
.controller('HomeCtrl',['$scope','myresource','$route','$routeParams',function($scope,myresource,$route,$routeParams){
// console logs when I click on pagination link ...
$scope.pageChanged = function(){
console.log("Loading Pagination ... ");
};
//fucntion to edit and save details
$scope.edit = function(myArray){
console.log("ID : ... !" + myArray.id);
console.log("NUmber ... !" + myArray.contactdetails.number );
//phone details fieds auto popution binding
$scope.phonenumber = myArray.contactdetails.number;
$scope.email = myArray.contactdetails.email;
//address part fieds auto popution binding
$scope.housenumber = myArray.addressdetails.number;
$scope.street = myArray.addressdetails.street;
$scope.suburb = myArray.addressdetails.suburb;
$scope.postalcode = myArray.addressdetails.postalcode;
$scope.data = {
userid: myArray.id,
number : myArray.contactdetails.number,
email : myArray.contactdetails.email,
streetNum : myArray.addressdetails.number,
streetName: myArray.addressdetails.street,
suburb: myArray.addressdetails.suburb,
postalcode :myArray.addressdetails.postalcode
}
/*for(var i = 0 ; i <= myArray.length ; i++ ){
if($scope.editId === myArray.id){
$scopedata.contactdetails.number = myArray.contactdetails.number;
$scope.user.contactdetails.number = data[i].number;
console.log("phone number " + $scope.user.contactdetails.number)
}else{
console.log("NOne !");
}
console.log("NOne !" + $scope.editId);
}*/
//
};
$scope.myArray=[];
//gets data from JSON file
myresource.query({},function(response){
$scope.users = response;
$scope.pagi = [];
myArray = $scope.users;
//object for pagination instead of premitives
$scope.pagi = {
currentPage:1,
pageSize:3,
objlength:myArray.length
}
//console.log("Start : " + ($scope.pagi.currentPage-1) * pagi.pageSize )
;
});
}])
//slice and filter desired number of items
.filter('PagiFilter', function(){
return function(data,start){
return data.slice(start);
}
});
//resource factory
app.factory('myresource',function($resource){
return $resource("./JSON/ScreenMockupData.json",{
update:{method:"PUT", isArray: true}
})
})
below is html :
problem 1 : pages do not link to next page
problem 2 : bootrap buttons are not displayed.
Search...
UserID NumberDate of birthAgeGenderAction
<td>{{user.user}}</td>
<td>{{user.idnumber}}</td>
<td>{{user.dob}}</td>
<td>{{user.age}}</td>
<td>{{user.gender}}</td>
<td><form method="post" ><button type="submit" id = "{{user.id}}" ng-model="editId" value="{{user.id}}" ng-value="{{user.id}}" ng-click = "edit(user)">Edit user{{user.id}}</button></td>
</form></td>
</tr>
</a>
</table>
</div>
</div>
<div class='btn btn-default'>
<ul uib-pagination total-items="users.length" items-per-page = "pagi.pageSize" ng-model="pagi.currentPage" data-ng-show="users.length" ng-change = "pageChanged()"> </ul>
</div>
******************Index.html**************************************
<!-- index.html -->
<!DOCTYPE html>
<html ng-app="app" >
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>User Management System</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class = "container">
<div ng-view></div>
</div>
<script src="./JS/node_modules/jquery/dist/jquery.js"></script>
<script src="./js/node_modules/angular/angular.js"></script>
<script src="./js/node_modules/angular-resource/angular-resource.js"></script>
<script src="./js/node_modules/angular-route/angular-route.js"></script>
<link rel="stylesheet" href="./JS/node_modules/bootstrap/dist/css/bootstrap.css">
<script src="./js/node_modules/angular-ui-bootstrap/dist/ui-bootstrap.js" ></script>
<script src="./js/node_modules/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js" ></script>
<link rel="stylesheet" href="./CSS/styles.css">
<script src="./JS/application.js"></script>
</body>
</html>
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 am able to display the map tiles using the code below, but cannot seem to find a way to get this geoJSON data to display using the Marker Cluster library for Leaflet. I was able to display the GeoJSON data without Marker Cluster no problem. I must be missing something obvious. Any assistance would be greatly appreciated.
<!DOCTYPE HTML>
<html>
<head>
<title>Leaflet GeoJSON Test</title>
<meta charset="utf-8" />
<!--Leaflet-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<!--Leaflet-->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
<!--Marker Cluster-->
<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>
<!--Marker Cluster-->
<script src="..\geoJSON\ga_brewery_master_list.geojson" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script>
var map = L.map('map').setView([33.76088, -84.38599], 5);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' +
'Imagery © Mapbox',
id: 'examples.map-i875mjb7'
}).addTo(map);
var geojsonMarkerOptions = {
radius: 4,
fillColor: "#ff7800",
color: "#000",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
var markers = L.markerClusterGroup();
var geoJsonLayer = L.geoJson(brew, {
onEachFeature: function popupContent(feature, layer) {
layer.bindPopup("<b>Name:</b>" + " " + feature.properties.Name + '<br />'
+ "<b>Type:</b>" + " " + feature.properties.Type
+ '<br />'
+ "<b>Barrels Produced/yr:</b>" + " " + feature.properties.Barrels_Ye
+ '<br />'
+ "<b>Address:</b>" + " " + feature.properties.Address
+ '<br />'
+ "<b>Zip Code:</b>" + " " + feature.properties.Zip_Code
+ '<br />'
+ "<b>City:</b>" + " " + feature.properties.City
+ '<br />'
+ "<b>State:</b>" + " " + feature.properties.State
+ '<br />'
)
;
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, geojsonMarkerOptions);
}
});
markers.addLayer(geoJsonLayer);
map.addLayer(markers);
map.fitBounds(markers.getBounds());
</script>
This is very embarrassing, but I found the problem. I had backslashes rather than forward slashes in the relative paths to the Marker Cluster plugin.
I simply changed this...
<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>
To this...
<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>
That fixed the problem. Here is the live map just for good measure.
http://sportruminations.com/Leaflet/HTML/test.html