Ways to output a string array from a JSON object containing additional attributes

Question

Ways to output a string array from a JSON object containing additional attributes

On the client side, I have received a JSON object from a REST service. This object contains multiple attributes, one of which is a String array. I need guidance on how to display this array using embedded AngularJS code in HTML. Here is my JSON object:

[
    "title": "Developing a System for Information Management in Disaster Relief",
    "url": "http://scholar.google.com/scholar",
    "relatedTitles": 
    [
        "Distributed robotic sensor networks",
        "Improving information access for emergency",
        "Tangible and wearable user interfaces for",
        "Non-parametric inferenc",
        "Airborne near-real-time monitoring of assembly" 
    ]
]

Below is an example of how the ng-repeat looks in HTML.

        
<tr ng-repeat="publication in publications">
        <td>{{publication.title}}</td>
        <td>{{publication.url}}</td>
        <td>{{publication.relatedTitles}} </tr>

Note: "publications" refers to the name of the JSON object

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

To determine how the information should be displayed when printing, consider the following options:

<tr ng-repeat="publication in publications">
    <td>{{publication.title}}</td>
    <td>{{publication.url}}</td>
    <td>{{publication.relatedTitles.join(', ')}}
</tr>

Alternatively, if you prefer to display each item within a <span> tag, you can utilize another ng-repeat:

<tr ng-repeat="publication in publications">
    <td>{{publication.title}}</td>
    <td>{{publication.url}}</td>
    <td>
        <span ng-repeat="relatedTitle in publication.relatedTitles">
            {{relatedTitle}} 
        </span>
    </td>
</tr>

Answer 2

To determine how the information should be displayed when printing, consider the following options:

<tr ng-repeat="publication in publications">
    <td>{{publication.title}}</td>
    <td>{{publication.url}}</td>
    <td>{{publication.relatedTitles.join(', ')}}
</tr>

Alternatively, if you prefer to display each item within a <span> tag, you can utilize another ng-repeat:

<tr ng-repeat="publication in publications">
    <td>{{publication.title}}</td>
    <td>{{publication.url}}</td>
    <td>
        <span ng-repeat="relatedTitle in publication.relatedTitles">
            {{relatedTitle}} 
        </span>
    </td>
</tr>

Answer 3

Answer №2

Utilizing nested ng-repeat directives is possible.

Here's an example of how you can achieve this:

<tr ng-repeat="publication in publications">
        <td>{{publication.title}}</td>
        <td>{{publication.url}}</td>
        <td>
          <table>
            <tr ng-repeat="title in publication.relatedTitles">
               <td>{{title}}</td>
            </tr>
          </table>
        </td>
</tr>

Answer 4

Utilizing nested ng-repeat directives is possible.

Here's an example of how you can achieve this:

<tr ng-repeat="publication in publications">
        <td>{{publication.title}}</td>
        <td>{{publication.url}}</td>
        <td>
          <table>
            <tr ng-repeat="title in publication.relatedTitles">
               <td>{{title}}</td>
            </tr>
          </table>
        </td>
</tr>

Answer 5

Answer №3

<div ng-repeat="book in books">
    <p>{{book.title}}</p>
    <p>{{book.author}}</p>
    <p>
      <span ng-repeat="genre in book.genres">
        {{genre}}<br>
      </span>
    </p>
</div>

Answer 6

<div ng-repeat="book in books">
    <p>{{book.title}}</p>
    <p>{{book.author}}</p>
    <p>
      <span ng-repeat="genre in book.genres">
        {{genre}}<br>
      </span>
    </p>
</div>

Ways to output a string array from a JSON object containing additional attributes

Answer №1

Answer №2

Answer №3

Similar questions

When receiveMessage is triggered, the FCM push notification fails to refresh the view

Utilize jQuery to refresh the database with the information retrieved from the ajax-request

Accessing a subdocument in MongoDB using its ObjectID directly

Ignoring templateUrl in AngularJS and Karma-Jasmine to prevent the occurrence of "Unexpected request: GET .../.html" error

What is the best way to create a circular to square gradient and save it within a two-dimensional array?

Updating dependencies of dependencies in npm: A step-by-step guide

Steps to trigger a modal (bootstrap 5) in react upon clicking a cell within the Full Calendar interface

What is the most effective way to eliminate error messages from the email format checker code?

Is it possible to create a webpage where the header and footer remain static, while the content in the body can be dynamically changed

Tips on utilizing the event.preventDefault() method within AngularJS?

Instructions on dynamically positioning a collection of div elements at the center of a webpage container

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

Is it necessary to sanitize input fields manually in Angular 6?

What is causing the UI to change every time I add a tag to refresh the web view?

Refreshing the Title and URL for a Clutter-Free Look

Which specific event in NextJS is triggered only during the initial load?

Utilizing fluent-ffmpeg in nodejs and express to effortlessly download a video

Adjust the range directly in ng-repeat from the directive

Utilizing node-json2html, generate individual HTML tables for each record

Error thrown by Jest: TypeError - req.headers.get function is not defined