Unexpected empty page upon attempting to load JSON data from a text file

The challenge I'm facing is loading names from an HTML file that contains JSON data. Oddly enough, the page appears blank/white without any error messages in the Firefox debugger.

Both test.html and persondb.html are located on the same server.

test.html

 <!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8>
<title>JSON Example</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>

<ul id="person-lista">

</ul>

<script>

$.ajax({
    url: "http://www.mywebbpage.com/ajax/persondb.html", // not the realname
    data: {
        limit: 5,
        name: 'ra'
    },

    success: function (response) {

        var personArray = response.personer;
        for(var i=0; i < personArray.length; i++) {
            var person = personArray[i];
            $('#person-lista').append('<li>' + person.fnamn + '</li>');
        }
    }
});

</script>
</body>
</html>

persondb.html

{
"personer": [{
    "fnamn": "RACHELLE",
    "enamn": "ZWIEFELHOFER",
    "epost": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="186a797b707d74747d36626f717d7e7d7470777e7d6a586b77757d7e79737d7c777579717636766d">[email protected]</a>"
}, {
    "fnamn": "RACQUEL",
    "enamn": "JOH",
    "epost": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65170406141000094b0f0a0d25160a080003040e00010a08040c0b4b0b10">[email protected]</a>"
}, {
    "fnamn": "RAE",
    "enamn": "BRAVARD",
    "epost": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cab8abafe4a8b8abbcabb8ae8ab9a5a7afacaba1afaea5a7aba3a4e4a4bf">[email protected]</a>"
}, {
    "fnamn": "RAFAEL",
    "enamn": "SAGASTUME",
    "epost": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4230232423272e6c312325233136372f2702312d2f2724232927262d2f232b2c6c2c37">[email protected]</a>"
}, {
    "fnamn": "RAISA",
    "enamn": "REINES",
    "epost": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f3d2e263c2e613d2a26212a3c0f3c20222a292e242a2b20222e262161213a">[email protected]</a>"
}]
}

Could it be that persondb.html isn't properly formatted? When viewed in a browser, it looks like this:

{ "personer": [{ "fnamn": "RACHELLE", "enamn": "ZWIEFELHOFER", "epost": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f78596949f929b9b92d98d809e9291929b9f98919285b784989a9291969c9293989a969e99d99982">[email protected]</a>" }, { "fnamn": "RACQUEL", "enamn": "JOH", "epost": "<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9dbc8cad8dcccc587c3c6c1e9dac6c4cccfc8c2cccdc6c4c8c0c787c7dc">[email protected]</a>" }, { "fnamn": "RAE", "enamn":...

Or possibly there's an issue with the "same origin policy"? Even though the files are on the same server (in the same folder).

javascriptjsonajax

Answer №1

Prior to iterating through your loop, make sure to properly parse the JSON data - 

success: function (response) {

    var parsedResponse = JSON.parse(response);
    var peopleArray = parsedResponse.people;
    for(var index=0; index < peopleArray.length; index++) {
        var person = peopleArray[index];
        $('#people-list').append('<li>' + person.name + '</li>');
    }
}

Answer №2

If you listen to EatPeanutButter, you'll know that parsing JSON is crucial. Another option is to ensure that your html-page response has the correct Content-Type (application/json). Your JSON data appears to be properly structured.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

After using driver.execute_script, the variable results in nil

Attempting to retrieve a lengthy string of URLs separated by commas is proving challenging. The code functions correctly in the console, but when running the script, the ruby variable urls_list remains nil. require 'rubygems' require 'selen ...

javascriptjqueryrubyajaxselenium-webdriver

Unable to deserialize the instance of the contactupload.User class from the START_ARRAY token

Having trouble parsing a JSON response using the Jackson API. I am new to Jackson parsing and would appreciate some help with this exception. The JSON response is as follows: [{"0":"96859","userid":"96859","1":"fshdh","phoneid":"fshdh","2":"","imageid":" ...

androidjsonjackson

Is it possible to output the value of history.go(-1) using a print function?

Currently, I'm working on enhancing a Vue application. My goal is to retrieve the value of the previously visited page using history.go(-1) and then use that value to assign certain values to a variable. This is what I have in mind: <script> ...

javascriptvue.jsvuetify.js

The Highchart column chart is triggering the drilldown event multiple times

I have created a column chart using Highchart and I am facing an issue with the drilldown functionality. Whenever I click on a bar multiple times, the drilldown event triggers multiple times as well. This results in the drilldown event being triggered repe ...

javascriptjqueryangularjshighchartshighcharts-ng

Avoid the need to refresh the HTML content every time there is a change in the Angular $

One of the challenges I'm facing is with a for loop in my JavaScript: for (var i=0;i<2;i++) { $scope.widget = widgets[i]; $scope.header = widgets[i].data.header; $scope.items = widgets[i].data.items; $scope.footer = widgets[i].data ...

javascriptangularjsdom

Generate JSON Data from Comma-Separated Values

I have a CSV file containing the following data. Check out the image for reference. I'm working with pandas in Python. My goal is to convert this data into JSON format structured like this: { "VMName": "vm101", ...

jsonpython-3.xdataframe

How can I transfer request headers from Express to index.js in React?

Is there a way to store user-related information received in the request headers of the Express server as a runtime variable accessible in index.js? I need to apply conditional routing based on these parameters. Alternatively, is there a way to pass these ...

javascriptreactjsexpressenvironment-variablesreact-router-dom

Obtaining weather information for a particular date through wunderground

Today marks my first experience using this wunderground service. My goal is to retrieve weather data under the following circumstances: Note : Today Date :2014-02-03 I am looking to access weather data ranging from 2014-01-21 to 2014-01-31, which fal ...

javascriptjsonapiweather-apiwunderground

Exploring elements within QJsonArray

Given a JsonArray, I am looking to search for a specific value based on its "ID". Here is the JSON data stored in the QJsonArray: { "datasources":[ {"id":1, "name":"tps-pos", "display-name":"TPS Position"}, {"id":2, "name":"tps-timer", " ...

c++jsonqtstl

Issue with React Toggle functionality on mobile devices

I have a hamburger toggle that I found in a template, but it doesn't seem to be functioning correctly. How can I activate the on/off toggle feature? When I click the toggle, nothing happens. What am I missing? <div data-testid="header"> ...

javascriptreactjstoggle

Node.js application - varying NODE_ENV upon NPM launch

Operating my node.js application can be quite confusing. When launched by npm start, it operates in "production" mode, whereas when launched using node start.js, it runs in 'development' mode. I want to ensure that the 'development' mo ...

javascriptnode.jsnpm

Is there a way to access the state value within the reducer function of createSlice?

Currently, I am utilizing redux-toolkit within my react project. A concern arises in a specific reducer inside the createSlice method where I aim to incorporate an existing array of entities from the state and then merge it with a new array before finalizi ...

javascriptreactjstypescriptreduxredux-toolkit

Form Validation in JavaScript Continues to Submit Form Even When 'False' is Detected

Here is the issue at hand - I am restricted to using older browsers (IE8 and FF8) by corporate policy. Despite my research indicating otherwise, it seems like this might be the root cause of my troubles. My current setup includes PHP 5.5.12 on Apache 2.4. ...

javascriptphphtmlforms

transferring JSON information to a personalized entity on an Android platform

I'm having some issues with my application. I am trying to retrieve JSON data from my database in a custom Android class and display it in a list. However, when I run the app, nothing happens - no errors are shown, and the list is not displayed. Any h ...

androidjson

Redirecting JavaScript form to search engine

I am struggling with creating a form that enables a user to input text and then directs them to a specified search engine with the input as the query. I am encountering difficulties in getting the JavaScript to properly redirect. An interesting observatio ...

javascriptformssearch

JavaScript automatically arranges child elements within their parent container in a random distribution without any overlapping

I am experimenting with creating a dynamic layout of circles (divs with border-radius) within a container without any overlap. Check out my progress here - https://jsbin.com/domogivuse/2/edit?html,css,js,output var sizes = [200, 120, 500, 80, 145]; var m ...

javascriptdomgeometry

WebPack bundling causing issues with Knockout Validation

I am developing a web application using Knockout along with the Knockout-Validation plugin, and I want to utilize WebPack for bundling. However, I encountered an issue where Knockout-Validation seems to break when incorporated with WebPack. To illustrate ...

javascriptknockout.jswebpackknockout-validation

How to create a sequence of queries to a mongoDB database (using mongoose) depending on a condition

Source Code let placeForSearch="hampi" let filteredHotelFacilities=req.body.filter //["Free Wifi"] let hotels = await Hotel.find({placeForSearch}) .where("facilities") .select(selectedProperties) .skip(pageNu ...

javascriptnode.jsmongodbexpressmongoose

Material-UI rating component outputs a string instead of a numerical value

I'm encountering an issue with the Material UI rating component. Despite providing it with a number as the initial value (this.props.data.feelings_rating), it returns a string whenever I change it within my app. Below is the relevant code: Rating co ...

javascriptreactjstypesmaterial-uionchange

The list window of the Obout ComboBox control remains visible and does not disappear

I'm currently working on a web application where I've implemented an ajax Update panel. Under this update panel, I have utilized a gridview to display data. Within the edit template of the gridview, I have incorporated three Obout ComboBox Contro ...

asp.netajaxvb.netobout