I am trying to write out the data from this JSON url into li's.
The JSON link is https://www.inquicker.com/facility/americas-family-doctors.json
<!DOCTYPE html>
<html>
<head>
<title>JQuery (cross-domain) JSONP</title>
<script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$.getJSON('https://www.inquicker.com/facility/americas-family-doctors.json',
function(data){
alert(data.facility);
$.each(data.schedules, function(i, name){
$('#names').append('<li>' + name.available_times[0] + '</li>');
});
});
});
</script>
</head>
<body>
<ul id="names"></ul>
</body>
</html>
You can add a test to check if the length of available_times array is > 0 before accessing the first cell.
And then, you can access to when or url properties :
available_times[0].when
available_times[0].url
Edit : save name.available_times[0] in a temp var and write
temp.when or temp.url.
I have created a JSFidle check this. You to check the data is available in available_times then proceed.
if (name.available_times.length){.......
.....
....
$(document).ready(function(){
$.getJSON('https://www.inquicker.com/facility/americas-family-doctors.json',
function(data){
$.each(data.schedules, function(i, name){
times=''
if (name.available_times.length){
times='<ul>'
times+='<li>'+name.available_times[0].when+'</li>'
times+='</ul>'
}
else{
times='<ul><li>No Time Available</li></ul>'
}
$('#names').append('<li>' + (name.name) + times + '</li>');
});
});
});
In the JSON link, some schedules have empty available_times arrays.
And available_times[0] is an object that contains the properties when and url, so you'll have to write name.available_times[0].url
Related
I am trying to build a basic covid19 website. the code I am using is only returning [object Object] in the actual data. What I am doing wrong here?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("https://api.covid19api.com/summary", function(result){
$.each(result, function(i, field){
$("div").append(field + " ");
});
});
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>
That's because you're trying to append JavaScript object to DOM. Instead, see what data you're getting (as someone mentioned in comments, by console.log) then you can edit your append part accordingly.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$.getJSON("https://api.covid19api.com/summary", function(result){
$.each(result.Countries, function(i, field){
$("div").append("<span>"+JSON.stringify(field)+"</span></br>");
});
});
});
});
</script>
</head>
<body>
<button>Get JSON data</button>
<div></div>
</body>
</html>
Here I have a sample answer which appends all list of country. Understand each and every line and function how it works. I have appended list of country, how to render the rest items that I leave it to you. Don't get discouraged or disappointed; learning to code is a journey, not destination.
Note:https://cors-anywhere.herokuapp.com/ is added if you are running it in your localhost to avoid CORS's problem. If you have hosted the page, you can remove it.
$(document).ready(function(){
$("button").on('click',function(){
$.getJSON("https://cors-anywhere.herokuapp.com/https://api.covid19api.com/summary", function(result){
var obj=result;
var json = JSON.stringify(obj);
var s = JSON.parse(json);
s.Countries.map(function(c){
$("#result").append("<span>"+c.Country+"</span></br>");
})
console.log(s.Countries[0].Country);
});
});
});
<HTML>
<HEAD>
<script>
$(function(){
$(window).on('hashchange', function() {
var hash = location.hash.replace( /^#/, '' );
document.title = 'example ' + hash;
});
$(window).trigger('hashchange');
});
</script>
<TITLE>example</TITLE>
</HEAD>
<BODY>
</body>
</HTML>
Let's say the <title> of example.com is example
This code should automatically update the page title for example.com/#city1 to example city1 and example.com/#city2 to example city2 and so on.
I have only an index.html file and I don't want to add php file to my html file.
As said in the comments you need to add the jQuery library to your page using :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
Then your code should work as expected.
Can someone please help me figure out how to fit this piece of javascript after the $.each in my to fit my needs? My JSON array can be found in the url declared in my javascript. Any help is much appreciated!
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON("http://quickcutsystem.com/quotesapp-home/?json=1",function(result){
$.each(result, function(i, field){
$("#output").append("Title: "+ field.title + " duration: "+field.id +" Price:"+field.price+"<br/>");
});
});
});
</script>
</head>
<body>
<div id="output"></div>
</body>
</html>
$.each(result, function(i, field){
$("#output").append(field.content);
});
Based on the JSON in your example, there is no need to loop through fields as it's not an array. You can just access the properties that you need, like this:
$.getJSON("http://quickcutsystem.com/quotesapp-home/json=1",function(result)
{
var page = result.page;
$("#output").append("Title: "+ page.title + " duration: "+page.id +"Price:"+page.price+"<br/>");
});
However there is no price in the json, you could loop through the attachments or show author details or the content etc.
In a class, I was asked to make a dynamic drop-down menu in a form using HTML5 and JavaScript. I did that here.
Now, I need to call data from a JSON file. I looked at other answers on SOF and am still not really understanding how to use JQuery to get info from the JSON file.
I need to have 2 fields: the first field is a Country. The JSON key is country and the value is state. A copy of the JSON file and contents can be found here. The second drop-down field adds only the values / arrays related to its associated Country.
Here is a copy of my HTML5 file:
<!DOCTYPE html>
<html lan="en">
<head>
<!-- <script type="text/javascript" src="sampleForm.js"></script>-->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> -->
<script type="text/javascript" src="getData.js"></script>
<script type="text/javascript" src="moreScript.js"></script>
<meta charset="UTF-8";
<title>Select Country and State</title>
<link rel="stylesheet" href="formStyle.css" />
</head>
<body>
<form id="locationSelector" enctype='application/json'>
<br id="selectCountry"></br>
<select id='country'></select>
<br id="selectState">=</br>
<select id='state'></select>
</form>
</body>
</html>
Here is a copy of the JS file I wrote so far that tries to get the data from the JSON file and fails:
$(document).ready(function() {
var data = "countryState.JSON";
var $selectCountry = $("#country");
$.each(data.d, function(i, el) {
console.log(el);
$selectCountry.append($("<option />", { text: el }));
});
});
Here is the content from the other JS file that adds the field instruction:
var selectYourCountry = document.getElementById('selectCountry');
selectYourCountry.innerHTML = "Select Your Country: ";
var selectYourState = document.getElementById('selectState');
selectYourState.innerHTML = "Select Your State";
This was supposed to at least add the values to the field, but nothing but empty boxes appear on the web page.
I then need to make a conditional statement like the one at here but calling or referencing data from the JSON file.
I have only taken some HTML and JavaScript courses, not JQuery and JSON. So, your help will greatly increase my knowledge, which I will be very grateful for.
Thank you!!
I found this SOF answer and changed my JS file to the following:
$(document).ready(function()
{
$('#locationSelector').click(function() {
alert("entered in trial button code");
$.ajax({
type: "GET",
url:"countryState.JSON",
dataType: "json",
success: function (data) {
$.each(data.country,function(i,obj)
{
alert(obj.value+":"+obj.text);
var div_data="<option value="+obj.value+">"+obj.text+"</option>";
alert(div_data);
$(div_data).appendTo('#locator');
});
}
});
});
});
And, I edited my HTML document as follows:
<form id="locationSelector" enctype='application/json'></form>
I removed and added back the <select> tags and with the following at least I get a blank box:
`<form id="locationSelector" enctype='application/json'>
<select id="locator"></select>
</form>`
I feel like I am getting closer, but am still lost.
Can you try this:
$.get("countryState.JSON", function( data ) {
var html = "";
$.each(data.d, function(i, el) {
console.log(el);
html += "<option value='"+Your value+"'>"+Your displayed text+"</option>";
});
$('#state').html(html);
});
What I want to do is to return json from my controller, this is my controller:
class BooksController extends Controller{
public function getIndex(){
return View::make('books.index');
}
public function getBooks(){
$books = array('Alice in Wonderland','Tom Sawyer','Gulliver\'s Travels','Dracula','Leaves of Grass');
return Response::json($books);
}
}
and this is my route:
Route::controller('books', 'BooksController');
and this is my view:
<html>
<head>
<meta charset=utf-8 />
<title>Show Books</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
</head>
<body>
Load Books
<div id="book-list"></div>
<script>
$(function() {
$('#book-button').on('click', function(e) {e.preventDefault();
$('#book-list').html('loading...');
$.get('books/books', function(data) {var book_list = '';
$.each(data, function(){
book_list += this + '<br>';
})
$("#book-list").html(book_list);
$('#book-button').hide();
});
});
});
</script>
</body>
</html>
when I load the view and I click the "Load Books" button the javascript just showing "loading...", no data from the controller is appear. what's wrong with my code?, help me guys. thanks
You can use like this:
also tried to use dd($books); to see if the arry is ok and use console.log(data) to see the json
return response()->json(['name' => 'Abigail', 'state' => 'CA']);
and in js side:
data.name or data.state
remember if you are returning array in the json you need iterate id