Why does looping through a fetch API response give undefined results? - javascript

I am trying to dynamically add objects from a json file to my HTML file. For some reason, when looping through the fetched json file, the properties of objects are undefined. Logging the entire json file into console works, the problem appears looping through the file for some reason. I have double checked, the title and body properties do exist for the json objects.
Here's the Javascript file:
window.onload = function() {
fetch('https://jsonplaceholder.typicode.com/posts')
.then((response) => response.json())
.then(json => {
console.log(json); // console output shows the objects fine
for (post in json) {
console.log(post.title);
var div = document.createElement('div');
var title = document.createElement('h1');
var body = document.createElement('p');
title.innerText = post.title;
body.innerText = post.body;
div.appendChild(title);
div.appendChild(body);
document.body.appendChild(div);
}
})
}
Here's the HTML file:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="src/js/script.js"></script>
<link rel="stylesheet" type="text/css" href="res/css/style.css">
<title>Lecture 7 - JS-4</title>
</head>
<body>
<h1> Fetch API</h1>
</body>
</html>
This is what the page looks like:
I have searched online and in most cases, the problem seems to be that the function fetching the data does not return anything. However, as I am not asking for the value of the function, this doesn't appear to be the problem in my case.


the for loop is wrong
try
for (const post of json) {...}
instead of
for (post in json) {...}
the for..of loop iterates over values while the for..in loop iterates over indices (for some strange legacy reasons)
also don't forget const or let since you introduce a new variable/constant called post inside the loop


Use of instead of in
for (post of json) {

Related

How display an image in a div in html using response from fetch data from api?

I'm trying to display an image in a div in html. I used fetch to get the json data from the api : https://collectionapi.metmuseum.org/public/collection/v1/objects/435828. The response gives json date with the image url named "primaryImage". I'm able to display it in text but not as an image.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image</title>
</head>
<body>
<img id="test">
<script>
let getimage = document.getElementbyId('test');
getimage.src= "data"
fetch('https://collectionapi.metmuseum.org/public/collection/v1/objects/435828')
.then((response) => response.json())
.then((data) => texting.innerText = data.primaryImage);
</script>
</body>
</html>

For your sample page,
replace;
.then((data) => texting.innerText = data.primaryImage);
line with;
.then(data => getimage.src = data.primaryImage);

The process is fairly simple and can be described as follows:
cache your image in a variable so that you can access it later.
make a request to your API.
then parse the API response as JSON.
then update the image source, or specifically the src attribute, as the API response's primaryImage field.
Here's a live demo to illustrate:
// cache the image element so we can access it later
const img = document.getElementById('test');
// make a request to your API
fetch('https://collectionapi.metmuseum.org/public/collection/v1/objects/435828')
// parse the API response as "JSON"
.then(r => r.json())
// update the image's "src" (source)
.then(r => img.src = r.primaryImage);
<img id="test">
You might as well think of adding a loading text or spinner while the image loads but am not going into that as it'll make my answer out of scope.
Just keep in mind that's not always the case as APIs can be different and the way they return their response can change. Anyway, most case will be the same though.
I recommend you take a look at the Fetch API and how it works.

Passing a JS variable to Flask API URL

I made an API using Flask that has a url of this format
localhost:5000/data/?query=<Query Goes Here>
This API basically just returns a webapage with this small json:
{
"text" : "(Whatever we entered in the URL)"
}
I wanted to know how we can pass a Node.js variable to the URL ?
If it is not possible, how can I make an API in Python that
Takes input in JS -> Sends it to Python for Processing -> Sends output back to JS OR Displays a rendered page with that output

I can answer you with this example.
Takes input in JS :
JS file :
$("#test_enable").on('click', function(e) {
$this = $(this)
var test_id = $("#test_id_generator").val(); # get a value from test_id_generator
$.ajax({
url: url,
type: 'POST',
data: {
'test_id': test_id,
},
success: function (data) {
location.reload(true)
}
});}
python file:
def product_register_disable(request):
test_id = request.POST.get('test_id')
Sends output back to JS OR Displays a rendered page with that output
you can show the value using JINJA2 and python
python side
#routes.route('/showtime', methods=["GET", "POST"])
def showtime():
return render_template('showtime.html', value = 'testtest')
HTML side
<!DOCTYPE html>
<html lang="en">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<body>
<div>{{value}}</div>
I hope I help.

Ajax call to external URL

I am trying to access on or two data attributes from my personal Duolingo account. When punching in the following URL a JSON object is returned:
http://www.duolingo.com/users/username (I've replaced my id with "username" in the url).
var getDuolingoData = function() {
return $.ajax({
type: "get",
url: "http://www.duolingo.com/users/daniel692007&callback=?",
dataType: "json"
});
}
getDuolingoData().then(function(json) {
console.log(json.site_streak); // this log is causing the error
});
When I try and log a key from the returned object, however, the following error is logged to the console:
Uncaught SyntaxError: Unexpected token <
Ajax is fairly new to me, Duolingo don't have an API that I know of and as this is an external URL I believe the dataType must be set to jsonp due to CORS.
Is there an obvious reason that I am not able to access the JSON object I can see when visiting the specified URL?
TY

The same issue happened to me. I was unable to solve it using jsonp. What i ended up doing was to make an action in the controller that recieved the json from external url and send it to the ajax call.
For exmaple
return $.ajax({
type: "post",
url: "/ActionInProject/ProjectController",
});
then in the Controller it will be different for whichever server side language is being used. For me it was C# so i did something like
[HttpPost]
public JsonResult ActionInProject()
{
using(HttpClient client = new HttpClient())
{
var response = client.GetAsync("someothersite.com/api/link");
return Json(client.GetAsync());
}
}

I tried your request with Postman
and I found it not valid json in the respone you can find below what is returned of the server
<!DOCTYPE html><html dir="ltr"><head><title>Duolingo</title><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"><meta name="robots" content="NOODP"><noscript><meta http-equiv="refresh" content="0; url=/nojs/splash"></noscript><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="apple-mobile-web-app-title" content="Duolingo"><meta name="google" content="notranslate"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-itunes-app" content="app-id=570060128"><meta name="google-site-verification" content="nWyTCDRw4VJS_b6YSRZiFmmj56EawZpZMhHtKXt7lkU"><link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/aiahmijlpehemcpleichkcokhegllfjl"><link rel="apple-touch-icon" href="//d35aaqx5ub95lt.cloudfront.net/images/duolingo-touch-icon.png"><link rel="shortcut icon" type="image/x-icon" href="//d35aaqx5ub95lt.cloudfront.net/favicon.ico"><link href="//d35aaqx5ub95lt.cloudfront.net/css/ltr-9f45956e.css" rel="stylesheet"> <link rel="manifest" href="/gcm/manifest.json"></head><body><div id="root"></div><script>window.duo={"detUiLanguages":["en","es","pt","it","fr","de","ja","zs","zt","ko","ru","hi","hu","tr"],"troubleshootingForumId":647,"uiLanguage":"en","unsupportedDirections":[],"oldWebUrlWhitelist":["^/activity_stream$","^/admin_tools$","^/c/$","^/certification/","^/comment/","^/course/","^/course_announcement/","^/courses$","^/courses/","^/debug/","^/dictionary/","^/discussion$","^/event/","^/forgot_password$","^/guidelines$","^/help$","^/j$","^/mobile$","^/p/$","^/pm/","^/power_practice/","^/preview/.+/","^/quit_classroom_session","^/redirect/","^/referred","^/register_user$","^/reset_password","^/settings/reset_lang","^/skill_practice/","^/team/","^/teams$","^/topic/","^/translation/","^/translations$","^/translations/","^/troubleshooting$","^/ui_strings/","^/upload$","^/vocab","^/welcome$","^/welcome/","^/word","^/words$"]}</script><script>window.duo.version="c89bfb9"</script><script>!function(r){function n(t){if(e[t])return e[t].exports;var s=e[t]={i:t,l:!1,exports:{}};return r[t].call(s.exports,s,s.exports,n),s.l=!0,s.exports}var t=window.webpackJsonp;window.webpackJsonp=function(e,i,o){for(var c,a,f,d=0,u=[];d<e.length;d++)a=e[d],s[a]&&u.push(s[a][0]),s[a]=0;for(c in i)Object.prototype.hasOwnProperty.call(i,c)&&(r[c]=i[c]);for(t&&t(e,i,o);u.length;)u.shift()();if(o)for(d=0;d<o.length;d++)f=n(n.s=o[d]);return f};var e={},s={31:0};n.e=function(r){function t(){c.onerror=c.onload=null,clearTimeout(a);var n=s[r];0!==n&&(n&&n[1](new Error("Loading chunk "+r+" failed.")),s[r]=void 0)}var e=s[r];if(0===e)return new Promise(function(r){r()});if(e)return e[2];var i=new Promise(function(n,t){e=s[r]=[n,t]});e[2]=i;var o=document.getElementsByTagName("head")[0],c=document.createElement("script");c.type="text/javascript",c.charset="utf-8",c.async=!0,c.timeout=12e4,n.nc&&c.setAttribute("nonce",n.nc),c.src=n.p+""+({0:"js/vendor",1:"js/app",2:"strings/zh-TW",3:"strings/zh-CN",4:"strings/vi",5:"strings/uk",6:"strings/tr",7:"strings/tl",8:"strings/th",9:"strings/te",10:"strings/ta",11:"strings/ru",12:"strings/ro",13:"strings/pt",14:"strings/pl",15:"strings/pa",16:"strings/nl-NL",17:"strings/ko",18:"strings/ja",19:"strings/it",20:"strings/id",21:"strings/hu",22:"strings/hi",23:"strings/fr",24:"strings/es",25:"strings/en",26:"strings/el",27:"strings/de",28:"strings/cs",29:"strings/bn",30:"strings/ar"}[r]||r)+"-"+{0:"2b9feda7",1:"662ee5e7",2:"c444b0a9",3:"a5658bf8",4:"3ea447d8",5:"1573893a",6:"c32ed883",7:"52cac8bc",8:"2c58adbb",9:"681aaba6",10:"d05b78c6",11:"f4071afb",12:"a1349f5c",13:"6a57ec9f",14:"762dfc94",15:"8a02897a",16:"4e429b1e",17:"8e921ddf",18:"524cc86b",19:"8df42324",20:"7d8a8fc5",21:"4fde5d79",22:"509b8809",23:"9f09bcfb",24:"77da48d4",25:"44cfb321",26:"13b268cc",27:"c0cac402",28:"3ecdeec1",29:"dfd2b224",30:"074ffddd"}[r]+".js";var a=setTimeout(t,12e4);return c.onerror=c.onload=t,o.appendChild(c),i},n.m=r,n.c=e,n.d=function(r,t,e){n.o(r,t)||Object.defineProperty(r,t,{configurable:!1,enumerable:!0,get:e})},n.n=function(r){var t=r&&r.__esModule?function(){return r.default}:function(){return r};return n.d(t,"a",t),t},n.o=function(r,n){return Object.prototype.hasOwnProperty.call(r,n)},n.p="/",n.oe=function(r){throw console.error(r),r}}([])</script><script src="//d35aaqx5ub95lt.cloudfront.net/js/vendor-2b9feda7.js"></script> <script src="//d35aaqx5ub95lt.cloudfront.net/strings/en-44cfb321.js"></script> <script src="//d35aaqx5ub95lt.cloudfront.net/js/app-662ee5e7.js"></script></body></html>
as you can see the JSON is wrapped inside a HTML page which is not valid JSON syntax it something related to the API itself. it returns a page instead of JSON object .

Json mimetype in html

I have written a HTML/Javascript application to generate JSON Content. The structure is valid but the mimetype is stuck in default text/html. Can someone please advise how to set to application/json. My latest attempt is:
Blockquote
<html>
<head>
<meta http-equiv="content-type" content="application/json; charset=UTF-8"/>
<title>Request JSON Test</title>
</head>
<body>
...

try this
var jsonVar = {
text: "example",
number: 1
};
this way you can create java-script object and convert it into a string:
document.body.innerHTML = jsonStr;
this will show your object in json format.

Passing a large JSON object from JSP to JavaScript

I know the question of passing Json from servlet/Jsp to javascript has been asked a lot, but my Json object is huge and contains around 400 records.
I have tried passing it from jsp to javascript as follows:
var json = ${json};
but the json object breakes and doesn't finish till the last record. When i print the json object in the servlet it has no breaks. I basically have a servlet which generates a JSON result and passes it to a JSP file and i want the result to be used to plot poly-lines and points on google map. There is no request being sent form the jsp to my servlet.
I am really a novice coder.
I use RequestDispatcher to send the data to jsp as follows:
request.setAttribute("json", json1);
RequestDispatcher dispatcher = request.getRequestDispatcher("result.jsp");
dispatcher.forward(request, response);
While execution the HTML page is not completely generated:
HTML-break
The jsp code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO- 8859-1">
<title>Insert title here</title>
<script src="http://maps.googleapis.com/maps/api/js">
</script>
<%
JSONObject json = (JSONObject)request.getAttribute("json");
%>
<script>
var json = ${json};
function initialize() {
//Set of statements
}
</script>
</head>
<body>
<div id="googleMap" style="width:1000px;height:1000px;"></div>
</body>
</html>
The problem is in the statement var json = ${json};

Categories

Resources