When i access this url: http://jservice.io/api/random the output is something like this:
[{
"id": 67917,
"answer": "agua",
"question": "After some fierce flamencoing, you might hear cries of this, Spanish for \"water\"",
"value": 800,
"airdate": "2004-11-18T12:00:00.000Z",
"created_at": "2014-02-11T23:29:50.743Z",
"updated_at": "2014-02-11T23:29:50.743Z",
"category_id": 1145,
"game_id": null,
"invalid_count": null,
"category": {
"id": 1145,
"title": "foreign words \u0026 phrases",
"created_at": "2014-02-11T22:52:16.443Z",
"updated_at": "2014-02-11T22:52:16.443Z",
"clues_count": 115
}
}]
I'm trying to use $.get() to get the data of request:
<html>
<head>
<title>Quiz</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
</body>
<script>
$.get("http://jservice.io/api/random", function(data, status){
alert("Data: " + data.title + "\nStatus: " + status);
});
</script>
</html>
But the output is this:
Data: undefined
Status: success
There is no data.title.
data is an array.
title is nested under the array element's category.
For this specific response, you'd need (roughly):
data[0].category.title
But if you can get multiple results back, you need to decide what you're actually going to do.
The return was an array. So you have to use
data[0]. Also the title is inside the category object.
Try this.
$.get("http://jservice.io/api/random", function(data, status){
alert("Data: " + data[0].category.title + "\nStatus: " + status);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The result can also be achieved by accessing the url as json object. Sharing below code for reference.
<html>
<head>
<title>Quiz</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</head>
<body>
</body>
<script>
(function() {
var srcURL = "http://jservice.io/api/random";
$.getJSON( srcURL, {
format: "json"
})
.done(function( data ) {
$.each( data, function( i, item ) {
console.log(item.category.title);
});
});
})();
</script>
</html>
Related
edit: I made a "whole page" to be able to test and better explain you what I'm trying to get.
I get this in json.json :
[
{
"2": [
{
"VALUE": "1",
"NAME": "MAPLE"
},
{
"VALUE": "2",
"NAME": "OAK"
},
{
"VALUE": "3",
"NAME": "CHERRY"
},
{
"VALUE": "9",
"NAME": "ASH"
},
{
"VALUE": "F",
"NAME": "BIRCH"
}
]
},
{
"9": [
{
"VALUE": "1",
"NAME": "3.25"
},
{
"VALUE": "2",
"NAME": "4.25"
},
{
"VALUE": "5",
"NAME": "7"
}
]
}
]
and get this for the output :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$.ajax({
url: "json.json",
type: "GET",
dataType: "json",
success: function(response) {
console.log(response);
$.each(response, function(key, value) {
console.log(key + " :: " + value);
//$('#segmentslist[segid="' + key + '"]').attr('disabled', false);
$.each(value, function(subkey, subvalue) {
console.log(subkey + " :: " + subvalue);
//$('#segmentslist[segid="' + key + '"]').append('<option value=' + value[key]["VALUE"] + '>' + value[key]["NAME"] + '</option>');
});
});
}
});
});
</script>
</body>
</html>
What I'm trying to read is the "2" and the "9" so I can enable the "select" matching this ID and then append some option value to it.
I'm not sure how to do this, since I don't know how to exact that "ID", the "key is only 0 and 1.
manage to get it... I wasnt that far... I just needed to do something else and come back later! :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$.ajax({
url: "json.json",
type: "GET",
dataType: "json",
success: function(response) {
$.each(response, function(key, value) {
$.each(value, function(key2, value2) {
$('#segmentslist[segid="' + key2 + '"]').attr(
"disabled",
false
);
$('#segmentslist[segid="' + key2 + '"]').empty();
$.each(value2, function(key3, value3) {
$('#segmentslist[segid="' + key2 + '"]').append(
"<option value=" +
value3["VALUE"] +
">" +
value3["NAME"] +
"</option>"
);
});
$('#segmentslist[segid="' + key2 + '"]').trigger("change");
});
});
}
});
});
</script>
</body>
</html>
I have created a GET WSO2 DSS Data service. This does not take any input parameters. the data service does a 'select * from table'.
i want to view this data on a html data table.
i am not coding in c# this is pure html so I would have to use javascript/jquery.
does anyone have some way of populating table rows for the requirement above.
Thanks
This way I invoke my DSS from my html
<html>
<head>
<title>DSS Test</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
<div>Consume DSS</div>
<table border='1' id="pharmacy">
<tr>
<td><b>Id</b></td>
<td><b>Name</b></td>
<td><b>Latitude</b></td>
<td><b>Longitude</b></td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "http://169.254.193.10:9763/services/testGet/getAllJson",
dataType: "json",
success: function (jsonObject) {
$.each(jsonObject, function (i, obj) {
$.each(obj, function (i1, obj1) {
$.each(obj1, function (i2, obj2) {
var id = obj2.ID;
var name = obj2.Descripcion;
var Latitude = obj2.Latitude;
var Longitude = obj2.Longitude;
$('<tr><td>' + id + '</td><td>' +
name + '</td><td>' + Latitude + '</td><td>' +
Longitude + '</td></tr>').appendTo('#pharmacy');
});
});
});
},
error: function (xhr) {
alert(xhr.responseText);
}
});
});
</script>
</body>
</html>
This is the respomse of my dss
{
"Pharmacies": {
"Pharmacy": [
{
"Image": "foto.jpg",
"ID": "5",
"Latitude": "1",
"Longitude": "2",
"Descripcion": "Pharmacy NATURAL"
},
{
"Image": "foto.jpg",
"ID": "6",
"Latitude": "2",
"Longitude": "2",
"Descripcion": "Pharmacy TRADICIONAL"
}
]
}
}
I'm just starting to use javascript and json.
I need to read data (get Information function) from a json file when processing an event in a javascript function without using jquery or any other librery. I don't know if I am missing something in the code, or if I have to create an Request and handle the callback, or if I need to import additional javascript to use json. Because I don't know how to make it work. all i get is undefined. Any help is aprreciated.
The json file:
"hotels": [
{
"name": "Hotel Sunny Palms",
"imgUrl": "imgs/sunny.jpg",
"rating": 5,
"price": 108.00
},
{
"name": "Hotel Snowy Mountains",
"imgUrl": "imgs/snowy.jpg",
"rating": 4,
"price": 120.00
},
{
"name": "Hotel Windy Sails",
"imgUrl": "imgs/windy.jpg",
"rating": 3,
"price": 110.00
},
{
"name": "Hotel Middle of Nowhere",
"imgUrl": "imgs/nowhere.jpg",
"rating": 4,
"price": 199.00
}
]
my javascript is
function hot1(){
var text = '{"hotels": [{"name": "Hotel Sunny Palms","imgUrl": "http://www.pruebaswebludiana.xyz/imgs/sunny.jpg","rating": 5,"price": 108.00}]}';
var obj = JSON.parse(text);
document.getElementById("img-container").innerHTML =
obj.imagUrl+ "<br>"+ obj.name+ " " +obj.rating+ " " +obj.price;}
and my html code is
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2" />
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
</head>
<body>
<nav></nav>
<div class="container">
<div>
<ul>
<li onclick="hot1()">Hotel Sunny Palms</li>
<li onclick="hot2()">Hotel Snowy Mountains</li>
<li onclick="hot3()">Hotel Windy Sails</li>
<li onclick="hot4()">Hotel Middle Of Nowhere</li>
</ul>
</div>
<div class="banner-section" id="img-container">
</div>
</body>
</html>
Your JSON file contains an array in the property hotels, you probably need to work with one of those, e.g.:
var jsonText = ...;
var parsedObject = JSON.parse(jsonText);
var hotels = parsedObject.hotels;
var hotel = hotels[0]; // instead of 0, pass the index of the needed hotel
document.getElementById("img-container").innerHTML =
hotel.imgUrl + "<br/>" + hotel.name + " " + hotel.rating + " " + hotel.price;
{"hotels": [{"name": "Hotel Sunny Palms","imgUrl": "http://www.pruebaswebludiana.xyz/imgs/sunny.jpg","rating": 5,"price": 108.00}]}
You get undefined because you are trying to read the name (and other properties) of the outer object.
The outer object doesn't have those properties. It has one property: hotels.
The value of the property is an array.
That array contains an object.
The properties you are trying to access exist on that object.
i.e.
obj.hotels[0].name // etc
Just learning javascript & html.
I am trying to get a value from some jsonp. This is what is being returned
detail( {
"StatusCode": 0,
"StatusInfo": "Processed and Logged OK",
"PageNumber": 1,
"TotalPageCount": 1,
"TotalProductCount": 1,
"PageProductCount": 1,
"Products":
[
{
"BaseProductId": "57543094",
"EANBarcode": "5010204736716",
"CheaperAlternativeProductId": "",
"HealthierAlternativeProductId": "",
"ImagePath": "http://img.tesco.com/Groceries/pi/716/5010204736716/IDShot_90x90.jpg",
"MaximumPurchaseQuantity": 99,
"Name": "Tesco Bacon Leek Quiche 400G",
"OfferPromotion": "Any 2 for £4.00",
"OfferValidity": "valid from 2/1/2014 until 21/1/2014",
"OfferLabelImagePath": "http://www.tesco.com/Groceries/UIAssets/I/Sites/Retail/Superstore/Online/Product/pos/2for.png",
"ShelfCategory": "134",
"ShelfCategoryName": "Pies Quiche & Pasties",
"Price": 2.3,
"PriceDescription": "£0.58 each",
"ProductId": "255163145",
"ProductType": "QuantityOnlyProduct",
"UnitPrice": 0.575,
"UnitType": "100g"
}
]
} )
My code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tesco JSONP</title>
</head>
<body>
<button id="detail">detail</button>
<script type="text/javascript">
function detail(data) {
document.getElementById('name').innerHTML = (data.Products.Name)
}
function data() {
var script_elem = document.createElement('script'),
url = "http://www.techfortesco.com/groceryapi_b1/restservice.aspx?command=PRODUCTSEARCH&JSONP=detail&searchtext=5010204736716&page=1&sessionkey=123456789"
script_elem.setAttribute('src', url);
document.head.appendChild(script_elem);
}
document.getElementById('detail').addEventListener('click', data, false);
</script>
<div id="name"></div>
</body>
</html>
When run I am getting undefined. I'm guessing that my syntax (data.Products.Name) is incorrect. If I try (data.StatusCode) then I get the correct result.
Can someone please advise.
Best wishes.
data.Products is an array.
You need to specify which element you want to acess in the array.
In this case you only have one element, so the correct syntax would be data.Products[0].name
This is My JSonSctipt file code:
var data = [
{
"SearchResult": {
"assets": [
{
"agent": "6.1.0",
"id": 1,
"model": "Gateway1",
"modelId": 2,
"name": "Name",
"serialNumber": "Serial01"
},
{
"agent": "M2M",
"id": 2,
"model": "Gateway1",
"modelId": 3,
"name": "Name",
"serialNumber": "Serial02"
}
],
"searchCriteria": {
"paginationEnabled": false,
"rowsPerPage": -1,
"startRow": -1,
"totalAvailableRows": -1,
"alternateId": {
"#xsi.nil": "true"
},
"modelNumber": {
"#xsi.nil": "true"
},
"name": "*",
"serialNumber": {
"#xsi.nil": "true"
}
}
}
}
];
$("#grid").kendoGrid({
dataSource: {
data: data,
schema: {
data: function(rawData) {
return rawData[0].SearchResult.assets;
}
}
}
});
Thsi is My Index.html file
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/hello-world.js"></script>
<script src="kendo/js/kendo.dataviz.min.js"></script>
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
</head>
<body>
<div id="grid"></div>
</body>
</html>
when i run this code uncaught typeerror object object object has no method 'kendoUi' Error I m getting so am Unable to Display data In Grid please tell me how i will fix it or can any one Please tell me how i will Json parsing In Kendo UI
It looks like you are trying to use Kendo Grid, which is a part of Kendo Web, but only have a reference to Kendo Mobile (i.e. kendo.mobile.min.js). You need to add a script reference to either kendo.web.min.js or kendo.all.min.js. Take a look at this jsfiddle, paying particular attention to the External Resource (i.e. kendo.all.min.js)
P.S. SO won't let me post a link to jsfiddle without some code, so here is part of the code again, to satisfy their requirements:
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<bo
<div id="grid"></div>
</body>