Data in JSON format for Ionic OneSignal

This is my duyurular.ts file ;

export class DuyurularPage {

 duyurular: any;

 constructor(public navCtrl: NavController, public navParams: NavParams, 
 public loadingPage: LoadingController,
 platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen)
 {

  platform.ready().then(() => {

    statusBar.styleDefault();
    splashScreen.hide();

    var notificationOpenedCallback = (jsonData) => {
      this.duyurular = jsonData.notification.payload;
      alert(this.duyurular);
    };

    window["plugins"].OneSignal
    .startInit("ASDQWEQWE", "ASDFQW123")
    .handleNotificationOpened(notificationOpenedCallback)
    .endInit();
  });

}

This is my duyurular.html file

<ion-card class="card-background-page" *ngFor="let item of duyurular">
<ion-item>
  <ion-avatar item-start>
    <img src="./assets/img/avatar.png">
  </ion-avatar>
  <h2>{{duyurular.title}}</h2>
</ion-item>
<ion-card-content>{{item.body}}</ion-card-content>

I can alert(item.title) but not display duyurular.title in duyurular.html.

What steps should I take to show duyurular.title and duyurular.body on the duyurular.html page?

Answer №1

There seems to be an issue with the notifications array in your code. The variable duyurular is not currently being recognized as an array, causing problems with the *ngFor loop in your HTML.

export class DuyurularPage {
 
 duyurular: any[] = [];//Define as an array and initialize it empty.
 
 //...Inside your callback function,
 var notificationOpenedCallback = (jsonData) => {
      this.duyurular.push(jsonData.notification.payload);//Add data to the array.
      alert(this.duyurular);
    };

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

Use MatDialog to open the next dialog when the previous one has been closed - whether you choose to use a

I'm trying to figure out how to open the next dialog from a stream only after the previous one has been closed. I want to make sure that I don't open all the dialogs in a row as soon as I get the values from the stream. const arraySource ...

There is no component factory available for the DialogDataExampleDialog. Have you ensured to include it in the @NgModule entryComponents?

Currently, I am a beginner in Angular. I recently started integrating MatDialog into my project. To do this, I followed the code provided on the official Angular documentation page https://material.angular.io/components/dialog/overview. However, upon click ...

Strange behavior observed when making REST calls using Ionic / Angular from an array to localStorage

I need assistance with my Ionic app development to make it more dynamic. Currently, I am making several REST calls and storing their results in local storage. I have defined the URI and name for localStorage in an array. The problem is that when the $ht ...

Is there a way to eliminate text from a barcode image using JavaScript or TypeScript?

This is my unique html code <div class="pr-2" style="width: 130px"> <div *ngIf="!element.editing" > <span class="ss">{{element.barcode}}</span> </di ...

Sending XML data from jQuery to two separate PHP scripts

After successfully sending XML data from jQuery via Ajax to the first PHP script, everything seems to be working fine. Here is a snippet of the jQuery - Ajax code: open('POST', 'get_and_send_XML.php', { xml: newXmlString1 }, '_b ...

What is the method for retrieving context data using useContext in the primary/overall component?

Check out the codesandbox for this code. I have been able to successfully pass and update context data within the child components. However, I am facing an issue where I am unable to access this data in the parent component. Any insights on why this might ...

Minimize unnecessary re-renders when working with dynamically nested components in React

My project state includes a nested list of animals, like this: {"europe":{"air":{name:"warbler", points:0}}} Each component is dynamically generated based on this data, with a button at the animal level triggering callbac ...

Transform the JSON object string into valid JSON format

My responseJson is structured as follows: const responseJson = [ { device_id: "arena-FnVq4HTwtBg6JqqBxWBB7W", timestamp: "2020-02-10T20:52:00.000Z", data: "{"type": "DATA", "un ...

How can you line up various form elements, like pickers, in a row using Material UI?

As someone new to material ui, I haven't come across a solution for my specific issue yet. While there are similar questions, none seem to address the problem of aligning different form field types. My observation is that the material ui date picker ...

Discovering the ASP.NET Core HTTP response header in an Angular application using an HTTP interceptor

I attempted to create a straightforward app version check system by sending the current server version to the client in the HTTP header. If there's a newer version available, it should trigger a notification for the user to reload the application. Ini ...

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...

angular2 fullCalendar height based on parent element

Currently, I am using angular2-fullcalendar and encountering an issue with setting the height to 'parent'. The parent element is a div but unfortunately, it does not work as expected. The navigation bar appears fine, however, the calendar itself ...

Is it true that a TypeScript derived class is not allowed to have identical variable names?

Why is it not allowed for TypeScript derived classes to have the same variable name, even if these members are private? Is there another way to achieve this, or am I making a mistake? class ClassTS { private nom: string = "ClassTS"; ...

What is preventing d3.json from including cookies in the request?

I'm delving into the world of ajax requests with d3.js (v5) and I'm facing a little hiccup. Here's my code snippet: d3.json(uri).then(data =>console.log(data)); When I tried this in an app utilizing cookie authentication, I consistently ...

In JavaScript using Vue.js, you can compare various objects within an array and calculate the total sum of their values based on a shared

This task may pose a challenge for those new to programming, but seasoned developers should find it relatively simple. I've been searching for a solution without success so far, hence turning to this platform for help. Here's the scenario at han ...

Creating a List of Lists from a Json File - A Step-by-Step Guide

I am currently working with a JSON file that I am iterating over using gson. As I loop through the file, I store the data in lists. However, I am facing an issue when it comes to iterating over nested lists. Instead of having multiple inner lists inside th ...

Adjust the tally of search results and modify the selection depending on the frequency of the user's searches within an array of objects

Seeking assistance with adding a new function that allows users to navigate to the next searched result. Big thanks to @ggorlen for aiding in the recursive search. https://i.stack.imgur.com/OsZOh.png I have a recursive search method that marks the first ...

Issues with WebAPI validation persist despite the correctness of data

Recently, my web API was functioning perfectly until something changed unexpectedly. Now, it seems to have stopped working altogether. Using Fiddler, I attempted to compose a PUT request to /api/Dealer/19 with the JSON Data below: {"notes":[],"dealerId ...

Organize an array of arrays containing similar objects into an array of arrays with unique objects, ensuring that each type of object appears only once

I need to extract the column slices from an array of arrays. For example: Array ( [0]: Red1, Red2, Red3. [1]: Green1, Green2, Green3, Green4, Green5. [2]: Blue1, Blue2, Blue3, Blue4. [3]: Yellow1, Yellow2, Yellow3. ) to Array( [0]: Red1, Green1, Blu ...

Combining the output of two Observables through the CombineLatest method to generate a

I possess two separate collections of information: Data Model: taxControlReference [ { "providerId": "HE", "taxTables": { "STAT": [ 1 ] } }, ...