How to display nested arrays in AngularJs

Within my array contacts[], there are multiple contact objects. Each of these contact objects contain an array labeled hashtags[] consisting of various strings.

What is the best way to display these hashtags using ng-repeat?

Answer №1

Here's an example:

<table>
  <tbody ng-repeat="person in people">
    <tr ng-repeat="tag in person.tags">
      <td>{{tag}}</td>
    </tr>
  </tbody>
</table>

Answer №2

One method to utilize is:

<table>
    <tbody ng-repeat="contact in contacts">
      <tr ng-repeat="tag in contact.hashtags">
        <td ng-bind="tag"></td>
      </tr>
    </tbody>
  </table>

To access the index within ng-repeat, you can use $index and for the parent ng-repeat, use $parent.$index.

Alternatively, you can try this approach:

<table>
    <tbody ng-repeat="(parentIndex, contact) in contacts">
      <tr ng-repeat="(childIndex, tag) in contact.hashtags">
        <td ng-bind="tag"></td>
      </tr>
    </tbody>
  </table>

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

Tips for building a task list using JavaScript only

Is it possible to create a to-do list using only JavaScript in an HTML file with a single div tag? Here is my HTML file for reference: example Here is the structure of my HTML file... <!DOCTYPE html> <html lang="en"> <head> ...

Forwarding users to a new destination through a script embedded within a frame

Currently, I am facing an issue where a page (lobby_box.php) is being loaded every 4 seconds on my main page (index.php) using JavaScript. The problem arises when the code within (lobby_box.php) that is meant to redirect the client from index.php to anothe ...

Is there a way to change the data type of all parameters in a function to a specific type?

I recently created a clamp function to restrict values within a specified range. (I'm sure most of you are familiar with what a clamp function does) Here is the function I came up with (using TS) function clamp(value: number, min: number, max: number ...

Unable to save the outcome in the session while using async waterfall

I have run a series of methods using async.waterfall which returns a result. I save this result in a request.session variable for later use with Ajax. However, I am facing an issue where I can set the value of the session variable initially but am unable t ...

The attempt to create the property 'and_ff' on the string 'and_chr 89' has failed

Encountering an issue with a Lambda function, I receive an error that does not occur when running the same code within an Express app. I'm puzzled. Data returned by caniuse.getLatestStableBrowsers(); [ 'and_chr 89', 'and_ff 86& ...

Decoding a formatted string

Here is a string that needs parsing: const str = 'map("a")to("b");map("foo")to("bar");map("alpha")to("beta");' The goal is to generate a JSON structure like this: [{id: 'a', map: 'b'}, {id: 'foo', map: 'bar&a ...

Customizing Attribute for Material UI TextField

I'm currently in the process of adding a custom data attribute to a TextField component like so: class TestTextField extends React.Component { componentDidMount() {console.log(this._input)} render() { return ( <TextField label= ...

Retrieving data via AJAX from an SD card

I am using the Atmel SAM4E-EK microcontroller as a server to host a webpage and send data over HTTP protocol. I am currently facing an issue with the download function while trying to download a file from my sd_card, which will not be larger than 512MB. s ...

Unable to retrieve information from server

enter image description here <!DOCTYPE html> <html ng-app="myApp"> <head> <title>ContactApp</title> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootst ...

When implementing the Dropdown Picker, it is important to avoid nesting VirtualizedLists inside plain ScrollViews for optimal

Currently, I am utilizing the RN library react-native-dropdown-picker. However, when I enclose this component within a ScrollView, it triggers a warning: "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because ...

Error: Angular ng-file-upload successfully uploads file, but Node.js fails to receive it

Currently, I am working on loading and cropping a file using Angular. Many thanks to https://github.com/danialfarid/ng-file-upload SignUp2ControllerTest -- $scope.upload --> data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACtWK6eAAAg ...

Encountered an error with symbol '@' while utilizing ES6 decorators

I have recently set up a React project and now I'm attempting to integrate MobX into it. This requires using decorators such as: @observable However, when I try to implement this, I encounter the following error: https://github.com/mobxjs/mobx Mod ...

Error encountered in main thread: java.util.ConcurrentModificationException. Cause of issue unknown

The 'playlist' class is designed to navigate through a linked list of songs and skip, replay, or go back to previous songs. However, there seems to be an issue resulting in the error message: Exception in thread "main" java.util.ConcurrentModific ...

Updating the style of different input elements using Angular's dynamic CSS properties

I am seeking guidance on the proper method for achieving a specific functionality. I have a set of buttons, and I would like the opacity of a button to increase when it is pressed. Here is the approach I have taken so far, but I have doubts about its eff ...

Using Express.js to send a response while simultaneously executing a background task

When working with Express.js, I have a need to execute a task after sending a response. My main goal is to minimize the response time and send back the response immediately without waiting for the task results to be returned to the client. The task itself ...

What is the best way to eliminate "?" from the URL while transferring data through the link component in next.js?

One method I am utilizing to pass data through link components looks like this: <div> {data.map((myData) => ( <h2> <Link href={{ pathname: `/${myData.title}`, query: { ...

How can I show a div beneath a row in an HTML table?

Check out the code snippet below: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <style type="text/cs ...

Updating an iframe's content URL

I am currently working on building a website using Google Web Design and everything is going well so far. I have added an iFrame to the site and now I am trying to figure out how to change its source when a button is pressed. Most of the information I fo ...

Analyzing arrays and object key/value pairs based on a specific value in javascript

I want to create a new object with key/value pairs. The new object should include values from an existing key/value object as well as unique values from an array. Here is the array: [{ name: "Computer", name: "Car", name: "House&q ...

Using Node JS, how to pass a variable length array to a function?

Is there a way to dynamically call an addon function with varying argument lengths? I capture user input in a variable like this: Uinput = [5,3,2]; Now, I want to pass these numbers as arguments to my addon function like this: addon.myaddon(5,3,2); I n ...