Navigating through various JSON arrays using Angular

Question

Navigating through various JSON arrays using Angular

I am currently working with a large JSON file in Angular and trying to iterate through it. The structure of the JSON file is as follows:

    {
       "subject1":[
          {
             "title":"titlehere",
             "info":"infohere."
          }],

       "subject2":[
          {
             "title":"titlehere",
             "info":"infohere."
          }],
       "subject3":[
          {
             "title":"titlehere",
             "info":"infohere."
          }]
}

My goal is to display the key for each category, followed by the title underneath it on the page. I have successfully displayed the keys, but I am struggling to retrieve the title for each category. Here is my HTML code snippet:

            <div ng-repeat="(key, value) in faqs">
            <h3>{{ key }}</h3>
              <ul>
                  <li><a href="#" ng-click="showHide(pageInfo)">{{ value }}</a></li>
              </ul>
            </div>

I have tried using {{ value.title }}, but it does not fetch the title. Instead, it displays the entire JSON file as a string. Could anyone provide any suggestions or solutions?

javascript json angularjs

Answer 1

Answer №1

To display the title of the first value, use the code {{ value[0].title }}

Your code should look like this:

<div ng-repeat="(key, value) in faqs">
     <h3>{{ key }}</h3>
     <ul>
        <li ng-repeat="val in value"><a href="#" ng-click="showHide(pageInfo)">{{ val.title }}</a></li>
     </ul>
</div>

Answer 2

To display the title of the first value, use the code {{ value[0].title }}

Your code should look like this:

<div ng-repeat="(key, value) in faqs">
     <h3>{{ key }}</h3>
     <ul>
        <li ng-repeat="val in value"><a href="#" ng-click="showHide(pageInfo)">{{ val.title }}</a></li>
     </ul>
</div>

Navigating through various JSON arrays using Angular

Answer №1

Similar questions

Transforming numbers into arrays in JavaScript/TypeScript for Angular 7

JavaScript issues in FireFox and Internet Explorer when using JQuery

Error encountered when injecting Angular module

Utilize jQuery to dynamically apply Bootstrap classes while scrolling through a webpage

You may encounter issues with invoking methods on a JavaScript object in Node.js after using res.send for response sending

Looking to create an Ajax Control Toolkit AutoCompleteExtender with results that are "similar"?

Define the starting value for Framer Motion's useCycle by taking into account the width of the screen

Can you explain the purpose of the statement `var MyConstructor = function MyConstructor()`?

Validating AngularJS form upon submission

Creating Typescript packages that allow users to import the dist folder by using the package name

The visibility of the Google +1 button is lost during the partial postback process in ASP.NET

Ways to unmark the "select all" checkbox when any one of its children is no longer selected

Combining JsonResult and delivering a unified outcome in C#

"Trouble connecting Sequelize associations with API routes, resulting in unsuccessful retrieval of data from the database

"Clicking on the dropdown menu will consistently result in it collapsing

Remove a data entry from the MySQL database by selecting the corresponding row in the table and utilizing the DELETE function

Order the rows being inserted into a table by iterating through them using a foreach loop directly from the

When hovering over various div elements in HTML

Angular: The Ultimate Guide to Reloading a Specific Section of HTML (Form/Div/Table)

Issue with repeated items in Flatlist