The fetch months feature does not seem to be functional on iPad devices

My goal is to display months and days on the iPad, but I'm encountering some issues:

  • When showing months, it unexpectedly shows undefined;
  • For displaying days, it displays either null or nan.

Javascript Code:

  for (var x = 0; x < parsed.length; x++) {
                    var objs = parsed[x];
                    var id = objs.id;
                    var eventname = objs.abbr_name;
                    var date = objs.startDate;
                    var event_url = objs.event_url;
                    var city = objs.city;
                    var country = objs.country;
                    var time = objs.endDate;
                    //var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
                    var dateObj = new Date(date);
                    var months = dateObj.getUTCMonth() + 1;
                    var month = monthNames[dateObj.getMonth()];
                    var day = dateObj.getUTCDate();
                    console.log(month);
                    console.log(day);
                    var eventData = [];
                    if (localStorage.getItem('eventData') === null) {
                        eventData = [];
                    } else {
                        eventData = JSON.parse(localStorage.getItem('eventData'));
                    }
                    var details = {};
                    details.id = id;
                    details.eventname = eventname;
                    details.date = date;
                    details.event_url = event_url;
                    details.city = city;
                    details.country = country;
                    details.month = month;
                    details.day = day;
                    details.time = time;
                    eventData.push(details);
                    var jsondata = localStorage.setItem('eventData', JSON.stringify(eventData));
                    if (x == 0) {
                        var htmlcontent = '<a href="/' + event_url + '"><div class="row_color"><div class="col-xss-12"><p class="small1">Similar Events from your industry in ' + country + '</p> </div><div class="col-xss-1"><div class="circle_image">' + month + ' <br><span class="black_col">' + day + '</span></div></div> <div class="col-xss-8"><p>' + eventname + '</p><div style="padding-left:0px!important;" class="col-xss-8"><div class=""><p class="small22"><span class="orange_col"><i class="fa fa-map-marker icon_rightpadding"></i></span>' + city + ', ' + country + '</p></div></div></div><div class="col-xss-2"><div class="row"><span class=" btn_orange_small pull-right">Attend</span></div></div></div></a>';
                    } else if (x % 2 == 0) {
                        var htmlcontent = '<a href="/' + event_url + '" ><div class="row_color"><div class="col-xss-1"><div class="circle_image">' + month + ' <br><span class="black_col">' + day + '</span></div></div> <div class="col-xss-8"><p>' + eventname + '</p><div style="padding-left:0px!important;" class="col-xss-8"><div class=""><p class="small22"><span class="orange_col"><i class="fa fa-map-marker icon_rightpadding"></i></span>' + city + ', ' + country + '</p></div></div></div><div class="col-xss-2"><div class="row"><span class=" btn_orange_small pull-right">Attend</span></div></div></div></a>';
                    } else {
                        var htmlcontent = '<a href="/' + event_url + '" ><div class="row_color1"><div class="col-xss-1"><div class="circle_image">' + month + ' <br><span class="black_col">' + day + '</span></div></div> <div class="col-xss-8"><p>' + eventname + '</p><div style="padding-left:0px!important;" class="col-xss-8"><div class=""><p class="small22"><span class="orange_col"><i class="fa fa-map-marker icon_rightpadding"></i></span>' + city + ', ' + country + '</p></div></div></div><div class="col-xss-2"><div class="row"><span class="btn_orange_small pull-right">Attend</span></div></div></div></a>';
                    }
                    $("#notify_bar").append(htmlcontent);
                }

Here's what has been done with the JSON data:

  • All JSON data has been saved in localStorage.

  • localStorage.eventData:

         "[{"id":210195,"eventname":"Aadi Discount Shopping Fair","date":"2015-07-17","event_url":"aadi-discount-shopping-fair","city":"Chennai","country":"India","month":"Jul","day":17,"time":"2015-07-20"},{"id":210198,"eventname":"Aadi Discount Shopping Fair","date":"2015-07-24","event_url":"aadi-discount-shopping-fair-coimbatore","city":"Coimbatore","country":"India","month":"Jul","day":24,"time":"2015-07-27"},{"id":210215,"eventname":"Aadi Discount Shopping Fair","date":"2015-07-31","event_url":"aadi-discount-shopping-fair-pondicherry","city":"Pondicherry","country":"India","month":"Jul","day":31,"time":"2015-08-03"}]"

While this setup works fine on desktop browsers, there seems to be an issue specifically on iPads.

If you have any suggestions, please feel free to share.

javascriptiosipad

Answer №1

The issue arises from the line var date = objs.startDate;

Your JSON does not contain a key called startDate. Even in Chrome desktop, I encountered undefined and NaN in the console.

To fix this, simply replace startDate with date.

parsed = [{"id":210195,"eventname":"Aadi Discount Shopping Fair","date":"2015-07-17","event_url":"aadi-discount-shopping-fair","city":"Chennai","country":"India","month":"Jul","day":17,"time":"2015-07-20"},{"id":210198,"eventname":"Aadi Discount Shopping Fair","date":"2015-07-24","event_url":"aadi-discount-shopping-fair-coimbatore","city":"Coimbatore","country":"India","month":"Jul","day":24,"time":"2015-07-27"},{"id":210215,"eventname":"Aadi Discount Shopping Fair","date":"2015-07-31","event_url":"aadi-discount-shopping-fair-pondicherry","city":"Pondicherry","country":"India","month":"Jul","day":31,"time":"2015-08-03"}]

var monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

for (var x = 0; x < parsed.length; x++) {
    var objs = parsed[x];
    var date = objs.date;
    var dateObj = new Date(date);
    var month = monthNames[dateObj.getMonth()];
    var day = dateObj.getUTCDate();
    console.log(month);
    console.log(day);
}

Answer №2

It has come to my attention that Safari does not support the hyphenated date format. It is recommended to use slashes instead:

"date":"2015/07/17"

Best regards.

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

Angular 15 experiences trouble with child components sending strings to parent components

I am facing a challenge with my child component (filters.component.ts) as I attempt to emit a string to the parent component. Previously, I successfully achieved this with another component, but Angular seems to be hesitant when implementing an *ngFor loop ...

javascriptangulartypescriptngforeventemitter

Challenges encountered when trying to update application and UITextView

My app includes a UITextView that changes its text when a button is pressed. The app is currently available on the AppStore and was developed using iOS 4.2. After testing a new version built for iOS 6, I encountered an issue where the UITextView appeared ...

iosios6uitextviewios5uitextviewdelegate

Creating a sidemenu in Swift using submenusMaking a sidemenu with submenus in

I added a side menu, but I have encountered an issue. When I click a button on the side menu, another button appears on the opposite side similar to this image https://i.sstatic.net/11BtT.png Upon clicking the side menu button, a sub side menu pops up. ...

iosswiftside-menu

Sending specific names as properties

Looking to streamline my repetitive form inputs by abstracting them into a component, I want the following functionality: <InputElement title="someTitle" v-model="someName" @blur="someFunction" name="someName" type="someType"> The desired output wo ...

javascriptvue.js

What could be causing the shadows to move across my objects in three.js?

My three.js scene is displaying a 3D model with a DirectionalLight casting shadows on it. However, I am noticing a strange gradient stepping effect on the model, almost as if it's composed of multiple submodels each with their own slight shadow. Che ...

javascript3dthree.jslight

How can contextual binding be implemented in TypeScript?

In Laravel, you have the option to specify which class should be imported if a particular class is accessed. For example, if someone tries to use the Filesystem contract, it will return the Storage Facade (Laravel Contextual Binding). Similarly, if someo ...

javascripttypescript

After a period of activity, requests to Node.js with Express may become unresponsive

My server is running smoothly but after some time, it stops responding to requests. When I try to load the page, it gives me a "couldn't establish connection" error message. Here is my app.js: var express = require('express'); var path = r ...

javascriptnode.jsexpressexpress-session

What is the process for executing mocha tests within a web browser?

Am I the only one who thinks that their documentation lacks proper instructions on running tests in the browser? Do I really need to create the HTML file they mention in the example? How can I ensure that it runs the specific test cases for my project? I ...

javascriptreactjsmocha.js

What is the reason that accessing array elements with negative indices is significantly slower compared to accessing elements with

Let's explore a JavaScript performance test: const iterations = new Array(10 ** 7); var x = 0; var i = iterations.length + 1; console.time('negative'); while (--i) { x += iterations[-i]; } console.timeEnd('negative'); var y = ...

javascriptarrays

Performing a callback function in node environment

It's common knowledge that Node.js operates on a single thread and relies on asynchronous operations for I/O tasks. When Node.js is not actively running code, it actively listens for events using platform-native APIs that allow it to respond to eve ...

javascriptnode.jsasynchronouscallbackparallel-processing

When operating within a Docker container, a NodeJS HTTPS server may inadvertently serve content over HTTP rather than the intended

Currently, I am in the process of developing a website using NextJS and Docker to simplify the deployment process. To initiate the project, I utilized the npx-create-next-app command and adapted this Dockerfile with some modifications to containerize it. I ...

javascriptnode.jsdockernext.jshttps

Steps to retrieve an image from the Vue src directory using JavaScript

I am working on a Vue app and I need to access some image files from an included JS file for different purposes, such as adding images to a canvas element. Usually, this task is simple with code like the following: function getImage() { let img = new Im ...

javascriptvue.js

Can you explain the exact purpose of npm install --legacy-peer-deps? When would it be advisable to use this command, and what are some potential scenarios where it

Encountered a new error today: npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1cfc4d9d5d5d6c8cfe1918f908f91">[em ...

javascriptnode.jsreactjsnpmnpm-install

Issue with Jquery - navigation menu scrolling

I'm struggling to understand why the second gallery isn't scrolling like the first one Check it out here: Here's the jQuery code that's responsible for making it work: $(function(){ var state = 0; var maxState = 7; var winWidth = $(&a ...

javascriptjqueryhtml

What is the best way to determine the total number of classes that come before a specific element

Currently, this is my approach: <script> function Answered(str) { var script = document.getElementsByClassName('Answered')[str]; if(script!==null) {script.setAttribute("style", "");} } </script> <span class=Answered style=" ...

javascriptjquery

Tips for searching a text across various URLs

For a while now, I've been grappling with a challenge that I just can't seem to solve. I created a test with multiple YouTube URLs generated using random strings, following the format "https://www.youtube.com/watch?v=XXX" where XXX represents the ...

javascriptseleniumautomationyoutubebrowser-automation

Effectively implementing an event observer for dynamically loaded content

I want to set up an event listener that triggers when any of the Bootstrap 3 accordions within or potentially within "#myDiv" are activated. This snippet works: $('#myDiv').on('shown.bs.collapse', function () { //code here }); Howeve ...

javascriptjqueryajaxtwitter-bootstrap

Adjusting linear gradient when the color picker is modified

My website has a default linear gradient over an image, which is controlled by the following HTML and TypeScript code: <header [style.background-image]="cv2HeaderStyle('0, 0, 0, 0.1', '0, 0, 0, 0.8')"></header> cv ...

javascriptcssangular

Filling out a form with existing data in React.JS

As I venture into the world of React, I encountered a challenge that has left me puzzled. My goal is to pre-fill a form with data fetched from a database using a parent component. The child component should display this fetched data as default and then adj ...

javascriptreactjs

How can I efficiently load AJAX JSON data into HTML elements using jQuery with minimal code?

I have successfully implemented a script that loads an AJAX file using $.getJSON and inserts the data into 2 html tags. Now, I want to expand the JSON file and update 30 different tags with various data. Each tag Id corresponds to the key in the JSON strin ...

javascriptjqueryhtmlajaxjson