Retrieving a specific item using its ID from a JSON file with Ionic 5

Newcomer's query

For multiple Ionic pages, I require fetching a specific item by ID from a centralized JSON file.

The structure of my JSON data is as follows:

 {
    "items": [
      {
      "id":"0",
      "link": "/cannaregio",
      "title": "Cannaregio",
      "area": "Cannaregio",
      "type": "place",
      "image": "./assets/imgs/attractions/canneregiosmall.jpg"
    },
    {
       "id":"1",
      "link": "/sanmarco",
      "title": "San Marco",
      "area": "San Marco",
      "type": "place",
      "image": "./assets/imgs/attractions/sanmarcosmall.jpg"
    },
    {
        "id":"2",
      "link": "/sanpolo",
      "title": "San Polo",
      "area": "San Polo",
      "type": "place",
      "image": "./assets/imgs/attractions/sanpolosmall2.jpg"
    },
    {
        "id":"3",
      "link": "/dorsoduro",
      "title": "Dorsoduro",
      "area": "Dorsoduro",
      "type": "place",
      "image": "./assets/imgs/attractions/dorsodurosmall.jpg"
    }
    ]
}

I'm looking to extract the title, area, and type based on a specific ID to exhibit on an HTML page. Could someone provide me with guidance on how to accomplish this task? I've attempted various methods but have only ended up feeling perplexed about the process.

jsonangularsortingionic-framework

Answer №1

import * as itemsData from "./items.json"

const selectedItems = itemsData.items.find(item => item.id == 1);

The selected item will have the id of "1" in your array.

Make sure your tsconfig.json includes the following:

{
  "compilerOptions": {
    [...]
    "resolveJsonModule": true,
    [...]
  }
}

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

Injectable error occurred while injecting one @Injectable() into another

I'm encountering an issue with Angular2 Dependency Injection. When attempting to inject one class into another, I am receiving the following error: Error Message: "Cannot resolve all parameters for 'ProductService'(undefined). Make sure tha ...

typescriptangular

What is the process for configuring allow-access-origin in the AJAX header?

What is the best method for specifying the header to allow access origin when making AJAX requests with JSON and JQUERY? ...

jqueryjsonajax

Decoding Facebook JSON Game Invitation Information

Currently, I am utilizing Facebook's platform and have implemented a callback method that returns the JSON result as a string. This is an example of the format for the returned result: { "request": "420211088059698", "to": [ "100002669403922", ...

c#jsonfacebookunity-game-engine

Ways to retrieve numerous data points from an array of dictionaries?

Just starting out with Python and in need of some guidance. I have a list of dictionaries sourced from a json file: x = [{'competition_id': 16, 'season_id': 4, 'country_name': 'Europe', 'competition_name': ...

pythonjson

Unable to display image source in viewport

Currently, I am working on developing a basic ionic app that interacts with an API that I have created. I am encountering an issue where all data is being displayed correctly in the view except for the src attribute of an image. When I use console.log to c ...

javascriptangularjsangularjs-ng-repeationic-framework

Find the correct file path for input using JavaScript or Angular 2

How can I retrieve the full file path of a selected Excel file using either pure JavaScript or Angular 2? I am looking to have the user select an Excel file, which will then be sent to a C# WEB API controller for further processing. Currently, my setup is ...

javascriptangular

Having issues with creating a new project using 'ng new hello-world' and also not able to resolve

I encountered an error while attempting to create a new app and even after trying ‘ng cache clean --force’, the issue persists. I attempted to reinstall node.js, npm, and angular-cli but none of these solutions proved effective for me. It may appear ...

angularnpmangular5angular6

Introducing the Angular 2/4 Dashboard Widget Module!

I am currently developing the dashboard for my Angular 2 application and I am in search of an npm package that fits my requirements. I came across a link that provides similar functionalities to what I need, which is . I want to be able to add new w ...

angularnpmwidgetangular2-templatedashboard

Discovering updates to a read-only input's [ngModel] binding in an Angular 2 directive

One issue I'm facing is with a directive that sets the height of a textarea dynamically based on its content: @Directive({ selector: '[fluidHeight]', host: { '(ngModelChange)': 'setHeight()' } }) export class ...

angulartypescriptangular2-directives

Every time I receive a message, I find myself inundated with unnecessary information. Is there a way to

I am receiving messages from PubNub, but I am only interested in responses of "Yes" or "No". The messages I'm getting include {u'text':'Yes'} and {u'text':'No'}. How can I filter out the extra information? Belo ...

jsonpython-3.xraspberry-pi3raspbianpubnub

Exploring nested objects and their keys and values using VBA

I have implemented the Deepl translation API in VBA to handle translations. The request is functioning smoothly and I am receiving translated html-text as output. However, my challenge lies in extracting the "text" value from the object that is returned: ...

arraysjsonvbaobject

The validation process in AJV encounters issues when handling arrays

My JSON instance validation using ajv and a simple schema is running into an issue specifically with the array type. The error message I receive is "this must be equal to one of the allowed values". However, my value is indeed one of the allowed values. It ...

jsonvalidationschemaajv

Connect an Observable to the template with async binding

I've been attempting to link an Observable to a template variable in Angular using the following code: [class.active]="isBookmarked$ | async" During the ngOnInit function, I initialize the Observable: var promise = this.cacheService.getItem(this.bo ...

angulartypescriptasynchronousobservableangular-pipe

How can I apply unique "compilerOptions" settings to a specific file in tsconfig.json file?

Can I apply specific tsconfig options to just one file? Here is my current tsconfig.json: { ... "compilerOptions": { ... "keyofStringsOnly": false, "resolveJsonModule": true, "esModuleInterop": t ...

angulartypescripttsconfig

What is causing the Angular HTTP Post method error "Property 'post' is undefined"?

Encountering an error while using Angular's HTTP Post method: Cannot read property 'post' of undefined. I am attempting to send my first HTTP POST request, but it is not functioning as expected. export class RegisterComponent impleme ...

node.jsangularpost

Listener document.addEventListener (function() {perform the function as shown in the illustration})

Currently facing an issue that I'm struggling to resolve, attempting to execute a code snippet from the ngcordova website without success. While using the plugin $cordovaInAppBrowser.open ({... it generally functions well until the inclusion of the ...

javascriptangularjscordovaionic-frameworkcordova-plugins

Retrieve relevant information from JSON upon scanning the barcode

Dealing with a barcode scanner app specifically designed for warehouse use. Upon scanning an item, the UPC number is successfully displayed. However, I now require the display of additional data associated with that UPC, which needs to be retrieved from a ...

iosobjective-cjson

Get the image pathway for Gatsby from a JSON file

Update: Success! It may seem a bit unconventional, but I finally got it to work. If anyone has suggestions on how to use only the filename without a relative path, please share. Here's what worked for me: data.json [ { "slug": "blo ...

jsonreactjsgraphqlgraphql-jsgatsby

Issues with MVC4 JSON Model Binding are causing problems

We have created a Viewmodel named GetUsersFromNextCircuitRequest, which includes the following properties: public class GetUsersFromNextCircuitRequest { public int? dosarId { get; set; } public List<int> dosareIds { get; set; } ...

c#jqueryajaxjsonasp.net-mvc-4

What causes a hyperlink to take longer to load when using href instead of routerLink in Angular 2+?

As I work on my web application using angular 2 and incorporating routes, I noticed a significant difference in loading speed based on how I link to another component. Initially, being new to angular, I used the href attribute like this: <a href="local ...

angularangular5