Exploring Ways to Traverse Through JSON Properties in TypeScript

I have a rather simple query: I have a TypeScript Object in JSON format, and I want to iterate through its properties.

{"work_type":"Fabricación","work_type_resp":"Mesa","looking_for":"Relación Calidad/Precio","image":"https://s3-sa-east-1.amazonaws.com/online-quotation-images/153366018967.png","width":"22","high":"34","depth":"","modifications":"mod"}

The Angular TypeScript component code that I am using is as follows:

export class DetailsOnlineQuoteModalComponent implements OnInit {

  @Input() title;
  @Input() values:string;
  properties:JSON;

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
    this.properties=JSON.parse(this.values);
    console.log(this.properties);
  }

}

My ultimate goal here is to access the key-value pairs within the JSON object and display them in my HTML file.

Thanks a bunch!

jsonangulartypescript

Answer №1

If you're working with angular 6.1, make sure to utilize the keyvalue pipe

<div *ngFor="let title of data | keyvalue">
  {{title.key}}
</div>

Alternatively, for Angular 5

<div *ngFor="let key of dataKeys">
  {{key}} ------------- {{data[key]}}
</div>
get dataKeys() { return Object.keys(this.data); }

Here's an example in action:https://stackblitz.com/edit/keyvalue-pipe-qtaqnm

Answer №2

Based on your input, it seems that you are looking to use ngFor in the HTML to showcase all of the key-value pairs

<div *ngFor="let key of Object.keys(properties)">
  {{properties[key]}} --> this represents the corresponding value
</div>

Answer №3

To retrieve all the keys, you can utilize Object.Keys and store them in a variable like so:

this.properties=JSON.parse(this.values);
let response = Object.keys(this.propertie);

Afterwards, you can iterate over them using ngFor:

<div *ngFor="let key of response ">
  {{properties[key]}}  
</div>

Answer №4

component.ts

let item = {"work_type":"Fabrication","work_type_resp":"Table","looking_for":"Quality/Price Ratio","image":"https://s3-sa-east-1.amazonaws.com/online-quotation-images/153366018967.png","width":"22","height":"34","depth":"","modifications":"mod"}

this.keysOfItem = Object.keys(item);

html

<div *ngFor="let key of keysOfItem ">
  {{item[key]}}
</div>

Answer №5

unfortunately, it appears that the functionality is not compatible (using keyvalue) with ANGULAR_9

take a look here to compare different methods of achieving the same result: https://stackblitz.com/edit/angular9-iterate-on-object-attribute

however, creating a custom method for the task still proves to be effective.

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

Generate a new entity by merging two objects containing keys that are identified by dots

I have a unique input as shown below: { survey.subObject1.key1: true, survey.subObject1.key2: "OTHER", survey.subObject2.key3: "[1,2]", survey.subObject2.key4: false, survey2.subObject3.key5: false, survey2.subObject3.key6: false } I a ...

javascripttypescriptobject

Is it possible to serialize various types of structs into the same JSON field only when they are not empty?

In the common package, I have a struct for response that is defined like this. package main import ( "encoding/json" "fmt" ) type Response struct { Id string `json:"id,omitempty"` //All other int/string field ...

jsongostruct

What is the method for displaying script commands within package.json files?

With a multitude of repositories, each one unique in its setup, I find myself constantly referencing the package.json file to double-check the scripts. "scripts": { "start": "npm run dev" "build:dev": "N ...

javascriptnode.jstypescriptnpm

Troubleshooting a Angular2 Styling Problem

Currently exploring #angular and experiencing an issue with my page not functioning properly in #firefox (the input text field does not display any text when typed, but retains the value upon submission). Here is my current environment: Firefox Version: ...

angularfirefox

Filtering multiple values from a JSON array in Angular 15, separated by commas

Currently, I am implementing Angular 15 in my project. While I am able to filter a single value from the search box, my goal is to filter multiple values separated by commas. Any assistance on achieving this would be greatly appreciated. FilterPipe impor ...

arraysangularrestfilterpipe

Looking up the image directory in a JSON file on the fly - (Module not found...) React, Next.js

I'm attempting to dynamically retrieve data from a JSON file and insert it into a component. { "team": [ { "id": "", "name": "", "role": "", "bio": "", "major": "", "i ...

javascriptjsonreactjsnext.jsnextjs-image

Is there a different way to retrieve the tag name of an element besides using

Currently, I am dealing with an outdated version (Chromium 25) of chromium. My goal is to utilize the tagName method in order to retrieve the name of the specific HTML tag being used. While I am aware that Element.tagName functions for versions 43 and ab ...

javascripthtmltypescriptchromium

Implementing Meteor authentication with a slightly separated JSON web service for storing data in postgresql

After delving into meteor with react to construct an IOS and android app, I must reflect on my journey through MS SQL, classic asp, and asp.net ten years ago. Since then, my knowledge has expanded to include nodeJS and a bit of react. The app I'm dev ...

jsonpostgresqlreactjsexpressmeteor

Having trouble running React tests with Vite and Vitest combination

An error occurs when running npm test (which calls vitest): FAIL src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx [ src/Applications/components/ApplicationsTable/ApplicationsTable.test.tsx ] Error: Directory import '{interna ...

reactjsnode.jstypescriptvitevitest

Having trouble with sending a JSON post request in Flask?

I have a setup where I am utilizing React to send form data to a Flask backend in JSON format. Here is an example of the code: add_new_user(e){ e.preventDefault() var user_details = {} user_details['fname'] = this.state.first_name user_d ...

javascriptpythonjsonnode.jsreactjs

Is there a way to display an image in a React Native app using data from a JSON file?

I am currently working with JSON content that includes the path of an image. I need to display this image in my React Native application. What is the best way to render this image? {"aImages":[{"obra_path":"http:\/\/uploa ...

javascriptandroidjsonreactjsreact-native

Android Studio encountered an unexpected object instead of an array at line 1, column 2 while attempting to execute a Retrofit request

Despite searching for a solution with Retrofit2 and following an online tutorial, I am still facing the same issue. The code worked fine in the tutorial but when I tried it on my own endpoint, I encountered the exception: java.lang.IllegalStateException: E ...

androidjsonrestretrofit

Link JSON information to Kendo UI

I just finished creating my very first Kendo chart. The manual data worked perfectly, but when I tried to bind it with JSON, the chart did not display correctly. Upon checking the data URL, I found that it was formatted like this: [{\"Name\":&b ...

jqueryjsonkendo-uitelerikjson.net

Which Restlet(Java) libraries are required for performing JSON GET and POST requests?

This question seems to be a repeat of one asked back in 2010, which you can find here. However, considering it's now 2017 and things may have changed, I believe it's worth revisiting this topic. Which libraries are necessary? With the use of ...

javajsonrestletrestlet-2.0

I have installed npm globally, but for some reason, I keep getting an error prompting me to reinstall it for every new Angular

Recently, I started delving into Angular 4. Following a tutorial, I installed nodejs, then the angular 4 cli, and created my project to begin working. Everything seemed fine until I tried running a local server using ng serve --open, which resulted in the ...

node.jsangularnpmangular-cli

Incorporating Swift code into a NativeScript app

I'm attempting to integrate native Swift code into my NativeScript application. Despite following the guidelines provided in the documentation, specifically adding a Swift source file to App_Resources/iOS/src/ and using publicly exposed classes direct ...

iosswifttypescriptvue.jsnativescript

"Firebase Deploy resulted in a Page Not Found error message appearing on the website

After creating a testing project using Angular 6, I attempted to deploy it on Google Firebase. I meticulously followed the instructions in the following sequence: Set up Google Login Created a new Firebase project Navigated to Firebase console -> ...

angularfirebasefirebase-hostingfirebase-cli

Errors in TypeScript are being brought up by using if-else statements inside a loop

I am currently working on a function to retrieve referral codes from users. The user inputs a code, which is then checked against the database to see if it exists or not If the code provided matches the current user's code, it should not be accept ...

javascripttypescript

What methods can be used to seamlessly exchange data between a Rails application and the client on a consistent basis?

I'm interested in creating a ruby method that will return a Hash of data, and I want it to be included in the application.js file upon app initialization. specifics: all definitions are currently located here (in lib or config directories, perhaps?) ...

ruby-on-railsjsoninitializationasset-pipeline

Can you successfully convert XML to JSON using JOLT?

Can the Jolt library at be used for transforming XML to JSON? For example, inputting XML and specifying a transformation in JSON format to receive JSON output. Is there any documentation or examples available for this process? ...

jsonxmlmappingtransformationjolt