Tips for displaying JSON data within another array in a Bootstrap table

I'm working with the following JSON data that I need to display in a bootstrap table. I can easily display the single-level data, but I'm unsure how to display array within array data in the bootstrap table.

[
    {
        "seriesName": "Indian Bank",
        "dataVlaues": {
            "11/12/2017": 50,
            "11/13/2017": 40,
            "11/14/2017": 60,
            "11/11/2017": 100
        }
    },
    {
        "seriesName": "Indian Bank1",
        "dataVlaues": {
            "11/18/2017": 12,
            "11/17/2017": 27,
            "11/16/2017": 30,
            "11/15/2017": 101
        }
    }
]
javascriptangularjsbootstrap-4

Answer №1

Here is the solution you've been looking for, enjoy!

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {

    $scope.userTypes = [{
      "type": 'Parent',
      "options": {
        "option1": "11QWERT",
        "option2": "22QWERT"
      }
    }, {
      "type": 'Parent1',
      "options": {
        "option22": "11QWERT",
        "option222": "22QWERT"
      }
    }];
  })
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myCtrl">
    <table class="table table-bordered">
      <thead>
        <tr>
          <th>Type</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat-start="user in userTypes">
          <td>{{user.type}}</td>
          <td>
            <button ng-click="showOptions = !showOptions" class="btn btn-xs btn-primary">
              Show
            </button>
          </td>
        </tr>
        <tr ng-repeat-end ng-if="showOptions">
          <td colspan="2">
            <table class="table table-bordered">
              <tbody>
                <tr ng-repeat="(key, val) in user.options">
                  <td>{{key}}</td>
                  <td>{{val}}</td>
                </tr>
              </tbody>
            </table>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Answer №2

Kindly review the jsfiddle link provided below:

https://jsfiddle.net/uniqueUser/1a2b3c4d5e/

I have transformed the ul li structure into a table-based layout; the JavaScript code remains unchanged, focusing on the usage of ng-repeat-start and ng-repeat-end

<div ng-app="myApp">
    <div ng-controller="myCtrl">
      <table>
    <thead>
        <tr>
            <td>Category</td>
            <td>Choice A</td>
            <td>Choice B</td>
        </tr>
    </thead>
    <tbody>
        <tr data-ng-repeat="user in userTypes">
            <td>{{user.type}}</td>
            <td ng-repeat-start="(key,value) in user.options">{{key}}</td>
            <td ng-repeat-end="(key,value) in user.options">{{value}}</td>
        </tr>
    </tbody>
</table>
    </div>
</div>

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

The buttons on the Bootstrap Carousel are unresponsive and the indicators are not displaying as they should

I am currently attempting to replicate a bootstrap carousel that includes indicators. However, in my code, I am unable to view the indicators, and the previous/next buttons are not functional. Although I came across a workaround that I could modify from th ...

javascripthtmlcssbootstrap-5

Formatting dates in a C# MVC application after parsing JSON

I am working on an MVC application that retrieves data from a SQL database and passes it to a view. One of the views contains a Kendo grid that displays the data, including a date column. The date data is stored in the SQL database as DateTime, while the m ...

javascriptjsonajaxdatetime

Tips for adjusting border colors based on the current time

Trying to change the border color based on the opening hours. For example, green border from 10am to 9:29pm, yellow from 9:30pm to 9:44pm, and orange from 9:45pm until closing at 10pm. The issue is that the colors change at incorrect times beyond midnight. ...

javascripthtmlcss

Should we pause JQUERY AJAX to prioritize usability, or only when absolutely necessary?

I am struggling with my LoadingStatus Function, which has two options: SHOW and HIDE. When a JQUERY POST is made, the Show option triggers to display, while the HIDE option occurs after the RESPONSE comes back. The problem I'm encountering is that s ...

javascriptjqueryajax

Issue with Angular custom directive compatibility in version 1.3.0

Check out my code snippet This code snippet is compatible with angular **1.1.3**. However, it does not function properly with 1.3.0 ...

javascriptangularjs

The selected plugin appears to be incompatible with mobile browsers

My project involves implementing the Chosen plugin for a select field, allowing users to type-search through lengthy lists. It functions perfectly on desktop but is disabled on both Apple and Android phones, reverting to the default user interface for sele ...

javascriptandroidjqueryjquery-chosen

Shade within the autocomplete

Is there a way to make the color property warning work on my autocomplete element at all times, rather than just on focus? Any suggestions or workarounds? Check out this code sandbox for reference. I really want the warning color to be visible constantly ...

javascriptreactjsmaterial-ui

What is the procedure for modifying the height of a button in HTML?

I wanted to add a flashing "Contact Us" button to the menu bar of my website to immediately attract people's attention when they visit. Here is the javascript code I used: <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&g ...

javascripthtmlcssbutton

Edge is experiencing a slowdown when utilizing ng-bind-html

I've been using ng-bind-html to bind HTML content to a div element. However, when I attempt to bind larger amounts of HTML, it can take around 5-6 seconds for the content to load. Interestingly, this issue seems to only occur in Chrome browser. I have ...

angularjstypescriptmicrosoft-edge

PHP is throwing an error because of a missing parenthesis in the argument list

Displaying data from PHP with a tag, here is the code: echo '<a class="ui label" onclick="variant_desc('.$product_id.');"> '.$variant->Field1.' </a>'; When I click the function mentioned in the tag, I get the ...

javascriptphpajax

Menu that sorts items based on a specified range of values entered by the user

I'm looking to implement a customized filtering dropdown menu, similar to the one showcased on this website Currently, I have functioning filters that can select items based on a specific category. However, I want to enhance the functionality by inc ...

javascriptjqueryhtml

Is there a method to delay HTTP requests until the number of pending requests drops below a certain threshold (N)?

I'm in the midst of a project that involves allowing users to upload multiple files simultaneously. However, sending out numerous requests all at once can overwhelm the server and trigger a 429 (Too Many Requests) error for those requests. Is there a ...

javascriptangularjsajax

Learn how to leverage the drag and drop directive in AngularJS for your web

I integrated drag and drop functionality into my project using: https://github.com/marceljuenemann/angular-drag-and-drop-lists This is how I implemented it: <div ng-repeat="list in lists"> <div style="float: left; margin-left: 5px;"> ...

angularjsdrag-and-drop

Continuing to use a function multiple times may lead to a type error as it is not a

My program is designed to be a quiz where users have to answer questions. After answering, they will see a summary and then get the option to submit or redo the questions. The issue arises when users choose to redo a question. Upon redoing it, the summary ...

javascript

When additional elements follow, the button ceases to function properly in JavaScript

I am working on creating a text-based idle game that involves multiple buttons and text around them. However, I have encountered an issue where the functionality stops working when I try to add text after the "Work" button. The callback function is no lon ...

javascripthtmlbutton

Retrieve information about the clicked item using the Backbone framework

I have a unique webpage that showcases an impressive collection of books. Each book listed on the page comes with essential information such as the title, price, and description. This data is imported from a JSON file. Excitingly, when users click on any ...

javascriptjquerybackbone.jsunderscore.jsclick

Ways to change the value of a property in reverse

I have a question about Vue and whether it is possible to achieve the opposite of using props. Let me clarify further with an example. Consider the following: const app = Vue.createApp({ data: function() { return { text: "Hello" } ...

javascriptvue.jsinheritancevue-component

Generate an array using hyperlinks within a list item created by the user

In the process of developing a program, I have included a feature where users can drag and drop .wav files into a playlist-container. These files are then played in the order they are arranged within the playlist-container. Currently, I am working on imple ...

javascriptphpjquery

Choosing the Following Date from the Datepicker using Selenium IDE

I need the selenium IDE test case to automatically select a date following the steps outlined below: Start by clicking on the departure date to open the datepicker Loop through the dates starting with the currently selected day until the next available d ...

javascripthtmlseleniumautomationautomated-tests

Ways to store a component in cache once its route is triggered

There are 3 components in my project: 1 parent and 2 child components with router outlet. The child component becomes active whenever its route is called, sharing data using a service. Both of these child components have complex views. When switching bet ...

javascriptangulartypescriptcachingangular-ui-router