Avatar of Cynthia Hill
Cynthia Hill
Flag for United States of America asked on

Angular Table for Profile Grid

Hello - I'm trying to learn a bit about using Angular. I have a specific learning exercise I am trying to figure out.

I am super new to Angular. I have been working with one of the tutorials on the Angular site in my down time over the last day or so...but very new to using it.

My main question for this thread is working with/trying to create an Angular table. Specifically one structured similar to the layout for the code below.
<table style="width:75%">
  <tr>
    <th>Firstname (e.g. Static Field Label)</th><td>Clark (e.g. firstName pulled from JSON file)</td> 
    <th>LastName</th><td>Kent</td>
  </tr>
  <tr>
    <th>Job</th><td>Reporter</td>
    <th>ID</th><td>94</td>
  </tr>
 
</table>

Open in new window




I am not seeing a lot of examples with a table structured similar to this (where its more of a profile grid instead of a straight list of data.

*Two other bits of functionality I will be researching for the table is to pull the info to be displayed from a JSON file.
*A search box to determine which record to display in the profile grid using an ID field.

Here are some sample values for the JSON file:

[
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "job": "Reporter",
           "id": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "job": "Business Owner",
           "id": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "job": "Photographer",
           "id": 40
       },
       {
           "firstName": "Tony",
           "lastName": "Stark",
           "job": "Business Owner",
           "id": 25
       }
   ]

Open in new window



Any tips or suggestions to get me pointed in the right direction would be greatly appreciated!!

Thanks,
JSONAngularWeb Development

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
Julian Hansen

The first question to ask is which version of Angular are you experimenting with? You have put AngularJS as the Topic Area which implies 1.x but as EE has not updated the Angular TA's to distinguish between 1.x and 2/4/5 it is not clear. The approaches are a bit different depending on which version you are using.

Second, if I understand correctly you want to iterate over the data set and display each record over two rows (rather than one) is that correct? First Name / Last Name in the first row and Job / Id in the second row?

This is very do-able in Angular. For AngularJs (1.x) you would use ng-repeat-start and ng-repeat-end (https://docs.angularjs.org/api/ng/directive/ngRepeat)

With Angular 2 you would use ngFor and a <template> to achieve the same result.

Example code can be provided once we know what version you are using.
Cynthia Hill

ASKER
Hummm....The application I'm trying to look under the hood on/learn from is using Git (v2.14.1), Node.js (v 6.11), and Angular CLI (not seeing any version specified anywhere). When the install was done for Angular CLI, the command was simply "npm install -g @angular/cli"

I am trying to go back and play with some code I have to do this with more vanilla HTML, JavaScript, etc...but based on what I have seen so far with code using the Angular framework...I assume its going to be completely different.
Cynthia Hill

ASKER
I just realized I did not speak to your second question regarding "you want to iterate over the data set and display each record over two rows (rather than one) is that correct?"

I want to show info for one record at a time...but yes...as far as how it appears on the webpage...I want it on multiple lines.

For Example:

_________________________________________
| First Name: Clack  |  Last Name: Kent   |
-----------------------------------------------------------
| Job: Reporter           | ID: 94                     |
-----------------------------------------------------------

I will also be researching how to have a search text box to determine which record appears in the grid based on the ID field (e.g. if the user enters the ID of 94 into the text box...the record for Clark Kent would be shown in the grid.
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Cynthia Hill

ASKER
Its not working on my work PC...I will have to try it on my home PC this evening.

Even the title is not showing up with the proper value (is still showing as {{title}} on the web page...and that was working on the Angular tutorial last night from my home PC after I changed the value in the app.component.ts file.

I will post back later this evening once I've had a chance to play with it. Thanks!
Cynthia Hill

ASKER
Yay....its working now!

I must have changed something in another file when I was trying different things before I posted the question.

I created a new app shell and started from scratch and its happy now :) Thanks so much!

I will research the text box to restrict values displayed and if I am not able to figure it out...i will post a question on a separate thread.

Happy Friday!
Julian Hansen

Regarding restricting what is displayed - open another question - refer to this on and post the URL to the new question here. I will pick up and see if I can provide a demo of how to do what you want - it is quite simple.

Sidebar: when you load a page and it does not show anything - check your console for errors - 9/10 there is a JavaScript error causing the problem - might not be easy to track because angular error reporting has a little bit of room for improvement.
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.