0

I am trying to to display JSON data from an external location (3 images with a city name and tagline) onto my HTML page but getting an error: "Uncaught ReferenceError: showPlaces is not defined at places.json:1:1" even though I did define the function already in my JS file.

JSON data: https://www.selicaro.com/webd330/week6/places.json

https://codepen.io/stefan927/pen/MWOqxmN?editors=1111

*<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <!-- Bootstrap CSS -->
    <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
        integrity="sha384- 
 9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
        crossorigin="anonymous"
    />
    <link rel="stylesheet" href="jsonp.css" />
    <title>Week 6 | Assignment | JSONP</title>
</head>
<body>
    <div class="container">
        <h3 class="card-title">
            Assignment: Load JSONP from an External Server
        </h3>
        <form>
            <div class="form-group">
                <button
                    type="button"
                    class="btn btn-primary mx-auto d-block"
                    id="btn2"
                >
                    Load JSON
                </button>
            </div>
        </form>
        <div id="output"></div>
    </div>
    <!-- Optional JavaScript -->
    <script>
        (function() {
          var btn = document.getElementById('btn2');
          btn.addEventListener('click', getJson);
          function getJson() {
            var output = document.getElementById('output');
            output.setAttribute("class", "card-group");
            var xhr = new XMLHttpRequest();
            var url = 'https://www.selicaro.com/webd330/week6/places.json'
            xhr.open('GET', url, true);
            xhr.onload = function(data) {
              if (this.readyState === 4) {
                if (this.status === 200) {
                  var data = JSON.parse(this.responseText);
                  function showPlaces(data) {
                    var content = '';
                    for (i = 0; i < data.places.length; i++) {
                      content += '<div class="card" style="width: 20rem;">'
                      content += '<img class="card-img-top" src=" data.places[i]["img"] 
+ '
                      " alt="
                      image of city ">';
                      content += '<div class="card-body">';
                      content += '<h5 class="card-title">' + data.places[i].loc '</h5>';
                      content += '<p class="card-text">tagline: ' + data.places[i] 
["tagline"] + '</p>';
                      content += '</div></div>';
                    }
                    document.getElementById('output').innerHTML = content;
                  }
                }
              }
              xhr.send(null);
            }
          }
        })();
    </script>
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <!--Your JS files go below this comment-->
    <script src="week6.js"></script>
    <script src="https://www.selicaro.com/webd330/week6/places.json"></script>
    <script
        src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384- 
 q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"
    ></script>
    <script
        src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
        integrity="sha384- 
cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
        crossorigin="anonymous"
    ></script>
    <script
        src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
        integrity="sha384- 
uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
        crossorigin="anonymous"
    ></script>
</body>
</html>*
Stefan Faville
  • 1
  • 1
  • You can't load JSON date with a script tag like this `` – jabaa Feb 27 '22 at 18:07
  • Does this answer your question? [HTML/Javascript: how to access JSON data loaded in a script tag with src set](https://stackoverflow.com/questions/13515141/html-javascript-how-to-access-json-data-loaded-in-a-script-tag-with-src-set) – jabaa Feb 27 '22 at 18:07
  • I thought I was using AJAX and a GET to call it: "var xhr = new XMLHttpRequest(); var url = 'https://www.selicaro.com/webd330/week6/places.json' xhr.open('GET', url, true); xhr.onload = function(data) {" Doesn't that solve the issue? – Stefan Faville Feb 27 '22 at 21:15
  • The error message is caused by the line in my first comment. You can read JSON using AJAX. – jabaa Feb 27 '22 at 21:20
  • I thought you could with JSONP. Ivreplaced the JSON object with a function and I defined the function in my script – Stefan Faville Feb 27 '22 at 23:11
  • What's the content of `https://www.selicaro.com/webd330/week6/places.json`? Is this JSON data or a JavaScript script? The description of the JSON tag contains: _"Before you ask a question, validate your JSON using a JSON validator such as JSONLint (https://jsonlint.com)."_ Have you validated it? – jabaa Feb 27 '22 at 23:19
  • It's JSON data. I've wrapped it in a function so I can call it. – Stefan Faville Feb 28 '22 at 01:10
  • JSON data can't be wrapped in a function call. Either it's JSON data (without function) or it's a script. Have you tried to lint it? I clicked the link and my browser tells me your JSON is invalid. – jabaa Feb 28 '22 at 02:09

0 Answers0