Error encountered while utilizing JSON data in Ionic 2

Can someone help me with avoiding errors in TypeScript when filtering a specific variable in JSON data? Here is an example of part of my JSON data:

Containing multimedia details:

"per_facet": [],
"geo_facet": [],
"multimedia": [
{
"url": "https://static01.nyt.com/images/2016/09/07/world/06NYTNow-Obama2/06NYTNow-Obama2-thumbStandard-v2.jpg",
"format": "Standard Thumbnail"
},
{
"url": "https://static01.nyt.com/images/2016/09/07/world/06NYTNow-Obama2/06NYTNow-Obama2-thumbLarge-v2.jpg",
"format": "thumbLarge",
}]

There is also an element without any multimedia content:

"per_facet": [],
"geo_facet": [],
"multimedia": [],

As you can see, the "multimedia" variable in the array has internal values in one of the elements but not in the other.

This is how I currently try to retrieve the URL parameter (which is an image):

<img [src]= "item.multimedia[0].url" *ngIf="item.multimedia[0].url.indexOf('http') === 0">

When trying to access the URL parameter of the multimedia array, I get an error saying "Cannot read URL of undefined". This makes sense since there is no data present to display. This method works for JavaScript, but I'm unsure how to solve this in TypeScript.

Does anyone know how to avoid this error and successfully retrieve other parameters from this array?

Thank you in advance. Suresh

arraysjsontypescriptionic2

Answer №1

Instead of directly accessing the field, it's better to first check if it contains the desired item.

You might consider

item.multimedia[0] && item.multimedia[0].url.indexOf('http') === 0

or

item.multimedia.length > 0 && item.multimedia[0].url.indexOf('http') === 0

Without seeing your entire code, I could be mistaken, but typically it's recommended to avoid relying on individual indexing, which can be quite precarious.

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

Obtaining the highest index value within an array

Here is an example of an array: $number= array( array([0]=>2,[1]=>2) array([0]=>2,[1]=>2,[2]=>2,[3]=>2) array([0]=>2,[1]=>2,[2]=>2) array([0]=>2,[1]=>2) ) T ...

phpmysqlarraysmax

What could be causing a null-string response when sending a PATCH request with JSON data in PyQt?

I attempted to send a PATCH request using the following code snippet: self.sendurl = QtCore.QUrl("http://"+ server + ":" + port + "/path/" + str(i['id'])) self.rdata = {'status': 'online'} self.rdata = json.dumps(self.rdata) ...

pythonjsonqtrestpyqt

Limiting JSDoc/TypeScript type to a specific array element

Utilizing TypeScript with JSDoc poses a challenge as I aim to restrict a variable to one of the known values stored in an array. I am aware that it can be achieved like so: /** @type {'one'|'two'|'three'} */ let v = 'fo ...

typescriptjsdoc

combining several arrays to form a single array

Can someone assist me with the property five.myArraysCombined? I want this property to consist of just one array (as it currently does in the fiddle) and I need to ensure that no numbers are added together. Each number in the array should not exceed 20, s ...

javascriptarrays

The module 'DynamicTestModule' has imported an unexpected directive called 'InformationComponent'. To resolve this issue, please include a @NgModule annotation

Even though I found a similar solution on Stackoverflow, it didn't resolve my issue. So, let me explain my scenario. When running the ng test command, I encountered the following error: Failed: Unexpected directive 'InformationComponent' i ...

angulartypescriptwebstorm

Setting the JSON encoder in marshmallow is a straightforward process

Is there a way to customize the JSON encoder used in the marshmallow library in order to serialize a Decimal field? I believe I can achieve this by overriding the json_module either in the base Schema or Meta class, however, I am unsure of how to go about ...

pythonjson

Array structure for storing high and low temperatures iterating through various constructs

My current project involves creating a program that requests the user to input the number of days they wish to track, with a requirement between 3 and 10 days. If the number entered is outside this range, an error message should be displayed prompting for ...

carraysfor-loop

Burst forth with unexpected and random elements within an array

How can we explode all the child tags innerHTML while preserving the order of their occurrence? The set of tags below is random and unpredictable, wrapped inside a div tag. Note: For img and iframe tags, only the urls need to be extracted. <div> ...

phparraysdominnerhtml

What's causing the unexpected behavior with this array?

Why is it not possible to use a double pointer to represent two-dimensional arrays? Find out more here. When it comes to representing arrays, they are typically shown in a structure like this: _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ | | | | | | | | ...

carrays

Retrieve information from a web service and display it on a map

I'm currently working on an Android application that retrieves locations from a webservice and displays them on a map. The app needs to update the location data every 15 seconds. What would be the most effective approach to achieve this? The webservic ...

androidjsonweb-servicesrestmaps

Importing TweenLite in Typescript is a breeze

After downloading the GSAP package via npm, I am keen on importing the TweenLite class to my TypeScript app. While importing all of GSAP can be achieved by using require('gsap'); and it functions correctly, this method does not work in TypeScript ...

npmtypescriptgsap

How to effectively send an HTTP GET request to a REST API in Angular 2 and save the response in a JSON object

Currently, I am attempting to execute a GET request to the GitHub API using Angular2. The returned data is in JSON format, and my goal is to store it in a JSON object for further processing. While referring to the Angular2 documentation for guidance, I en ...

restapiangulartypescriptangular2-services

How can I display 4 react components, such as custom buttons, in a manner that ensures the most recently pressed button appears on top?

I've been attempting to solve this problem, but I'm struggling to find a solution. My current approach involves grouping the 4 button components in an array and shifting their positions based on user input. Is there a more efficient way to accomp ...

reactjstypescriptreact-native

php array combining

When I look at the code output, it appears as follows: Array ( [0] => 53,67,70 [1] => 48 [2] => 11,22,13 ); My desired output is: array(11,22,13,48,53,67,70) $result = $this->db->get_where('table',array(' ...

phparrayscodeigniter

Use JavaScript and PHP to retrieve a value from an array and dynamically populate select options based on that value

In my PHP code, I have two arrays structured like this: Array ( [0] => 11 [1] => 11 [2] => 11 [3] => 11 [4] => 11 [5] => 187 ) Array ( [0] => 118 [1] => 112 [2] => 85 [3] => 81 [4] ...

javascriptphpjqueryarraysselect

Converting an NSArray to [Int] using Swift

Here's my question in a nutshell: let string = "1,2,3,4,5,6" I'm trying to find the maximum value in the string and I want to follow the method outlined here. So, I've written the following code: let array = string.componentsSeparatedBySt ...

iosarraysswift

Parent variable in Angular Type Script causing undefined error

Can anyone explain why I keep receiving an undefined error? export abstract class BaseEditorComponent implements IPropertyEditor, OnDestroy { @Input() public element: BpmnJS.IRegistryElement; --more code here export class CommonPropertiesEditorCo ...

angulartypescript

Retrieve data from an Observable containing JSON objects

I am currently working with a Http request that returns Json data, which I then store in an observable. { "proyecto":{ "nombre": "Mercado de Ideas", "tecnologias": [ { "nombre": ".NET", "icono": "http://getsetwebsit ...

htmlangularjsjsonionic2observable

Calling synchronous methods in Typescript

Hello Nativescript Team, I seem to be stuck with making method calls in my code. Could you please provide me with guidance on how to implement synchronous method calling in Nativescript + Angular? import { Component, OnInit, AfterContentInit } from " ...

javascriptangularjsangulartypescript

How to retrieve an image from a Spring RestController using Angular and store it in the

Currently, I am working on a Client-Server application that utilizes SpringBoot and Angular2. One of the functionalities I have implemented successfully is loading an image from the server based on its filename. At the client-side, I store the attribute i ...

javaspringtypescriptangularspring-boot