Using spaces in JSON key names can create potential compatibility issues

I have a JSON structure that needs to be displayed in a table with specific keys and values. The key names contain spaces, such as "PAY ALL", "PAY PART", "DECLINE", and I need to show the corresponding values for each in the table rows. How can I achieve this? Here is an example of my JSON object:

$scope.tableData={

        "KEY-1": "VALUE-1",

        "KEY-2": "VALUE-2",

        "data": {

            "PAY ALL": {
                    "NumberOfBills": "1800000",
                    "CumulativeBillAmount": "45000000",
                    "ResponseProgress": "60"
                },
                "PAY PART": {
                    "NumberOfBills": "6000000",
                    "CumulativeBillAmount": "15000000",
                    "ResponseProgress": "20"
                },
                "DECLINE": {
                    "NumberOfBills": "3000000",
                    "CumulativeBillAmount": "7500000",
                    "ResponseProgress": "10"
                },
                "REQUEST EXTENSION": {
                    "NumberOfBills": "240000",
                    "CumulativeBillAmount": "6000000",
                    "ResponseProgress": "8"
                }

    }

}

My goal is to create a table based on the JSON response above, like the one shown in this image: https://i.stack.imgur.com/VLCbk.png

I attempted to bind the data in my HTML, but nothing shows up. 

<tr ng-repeat="dataValue in tableData">
            <td><img src="./assets/images/Group <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b68636f1b6923752b353c">[email protected]</a>" class="img-bo"/></td>
            <td>{{dataValue.data["PAY ALL"]}}</td>
            <td><div class="bg">{{dataValue.data.NumberOfBills}}</div></td>
            <td><div class="bg">{{dataValue.data.CumulativeBillAmount}}</div></td>
            <td><div class="bg">{{dataValue.data.ResponseProgress}}</div></td>
          </tr>

If anyone can provide assistance, it would be greatly appreciated.

angularjsjson

Answer №1

Your code snippet should look something like this:

 <table>
  <tr>
    <th>category</th>
     <th>number of bills</th>
     <th>cumulative amount</th>
     <th>response</th>
  </tr>
  <tr ng-repeat="(key,value) in tableInfo.data">
        <td>{{key}}</td>
            <td><div class="bg">{{value.BillCount}}</div></td>
            <td><div class="bg">{{value.TotalAmount}}</div></td>
            <td><div class="bg">{{value.ResponseStatus}}</div></td>
          </tr>
  </table>

Check out the working fiddle here

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

Rails JSON output is suddenly causing timestamps to glitch and default to 2000-01-01T01:31:35Z. What could be causing this unexpected

Currently, I am constructing a JSON object in Rails like this: @list = Array.new @list << { :created_at => item.created_at } end @list.to_json The problem arises when the browser receives data like this: "created_at\":\"200 ...

ruby-on-railsrubyjsonruby-on-rails-3

Using MongoDB to compute the mean value of elements within nested arrays

As a newcomer to MongoDB, I am currently working on developing a function that can calculate the average marks for a student. I have formulated the following document: student = { "id": 123456, "name": "John", "surname": " ...

arraysjsonmongodb

Create a bespoke AngularJS directive for a customized Twitter Bootstrap modal

I am attempting to create a unique custom Twitter Bootstrap modal popup by utilizing AngularJS directives. However, I'm encountering an issue in determining how to control the popup from any controller. <!-- Uniquely modified Modal content --> ...

javascriptangularjstwitter-bootstrapangularjs-directive

What methods can be implemented in Angular JS to avoid the risk of cutting, copying, and pasting in the password and

I have an enrollment form with nearly 30 fields, and I am currently using Angular for validation. Most of my validation is complete, but I am specifically concerned about the password and confirm password fields. Is there a way to prevent users from copyi ...

angularjs

Struggling to connect HTML elements with AngularJS and TinyMCE?

My objective is to edit text using tinymce, persist it in a database, and display it within a div by incorporating angularJS for the same styling and formatting. I am utilizing tinymce 3.5.8 with an angularUI directive. I have successfully saved the wysiw ...

htmlbindingangularjstinymce

angularjs ng-if is executed before the controller is loaded

I have a view that receives data from a controller. app.controller('teamLoadCtrl', ['$scope', '$rootScope', 'dataService', function ($scope, $rootScope, dataService) { $scope.$watch(function () { return ...

angularjs

What is the best way to transmit a JSON object to REST services using Angular?

Whenever I attempt to send the JSON object to REST services, I encounter an error that looks like this: http://localhost:8080/api/v1/cardLimit 400 (Bad Request); JSON Object Example: public class GameLimit implements Serializable { private stati ...

javaangularjsjsontypescript

Struggling to make json_encode function properly with input from database

Despite my efforts, I can't seem to get json_encode working properly for results retrieved from the fr column in my database. You can find an export of my table at mctrivia.com/language.zip. I have already switched everything to utf8mb4 as recommend ...

phpjsonmysqli

Unexpected error occurs when executing a valid MongoDB query, displaying 'Error: Invalid JSON object'

Problem I seem to have made a mistake in the JSON query syntax, but I can't figure out where. My goal is to group the data in overviewData based on four values and add a COUNT feature. Solution overviewData <- M_CONNECTION$aggregate('[ ...

rjsonmongodbmongolite

"Integrating a controller into a modal view: a step-by

After spending an unhealthy amount of time on this issue, I finally managed to resolve it. Initially, the modal.open function was only darkening the screen without displaying any dialog box. However, by using windowTemplateUrl to override templateUrl, I wa ...

javascriptangularjsangularjs-directive

Serialize your object using Jackson's serializer

I am facing an issue with the Serializer functionality. Here is my problem: There is a bean class defined as follows: @JsonSerialize(using = MyObjectSerializer.class) public class MyObject { public int a; public boolean b; } During serialization ...

javajsonjacksonjsonserializer

Challenges Encountered with AngularJS $http Service

How do I pass my data from the http request to the $scope in the MainCtrl? The code below should fetch data from a MySQL Database with an $http-service, but somehow the data provided by the service doesn't go to the controller or gets displayed incor ...

javascriptphpmysqlangularjs

AngularJS ng-view doesn't refresh content autonomously

I'm puzzled as to why ng-view isn't updating data changed from the controller. Here is the code snippet: $scope.reloadUserInfo = function() { APIs.tot_of(null).then(function(result) { $scope.tot_of = result; APIs.info_of(null ...

angularjs

Utilize a stored string as the destination for the content of an object

We are currently working on processing a large amount of json data and trying to specify which parts of it to use using string variables. My goal is to convert a string into an object path to access the content of an item. The following code works correc ...

phpjson

Struggling to dynamically fill the table with Ajax Json data

After retrieving data from my webservice call, I am sending this JSON response: [ [ { "id": 123, "vendorName": "PoppyCounter", "item": "Chocolate" }, { "id": 1234, "ve ...

javascriptjqueryjson

Touch Sencha - Continuous Loading in DataView

Hi there! I'm a beginner in sencha touch and currently trying to wrap my head around it. I want to create a simple app that loads a JSON string from a file. Oddly enough, when I test the app on localhost, the dataview shows up perfectly fine. However, ...

jsonextjssencha-touchdataview

When attempting to use AngularJS to post to Express 4, the return is a bad request

I've encountered an issue with posting AngularJS to Express 4.0 and could use some help! After taking a MEAN stack course on Pluralsight, I downloaded the source code from my instructor's GitHub repository (Github - Course Source Code). You can ...

node.jsangularjsmongodbexpress

Using Angular $resource to store an object with arrays

Consider a scenario where we have a User $resource structured as follows: $scope.user = { name: 'John', hobbies: [1, 2, 3] } If we were to save User.save($scope.user) to the server, it would send the following parameters: name: 'John& ...

javascriptjqueryangularjsrest

Tips for extracting data from a nested JSON object while utilizing GSON library on Android

Here is an example of how my JSON response appears: [{"order":-1,"artist":[{"name":"Hey"}]},...] I am seeking guidance on how to extract the name from the artist object using GSON. Initially, I attempted to achieve this task utilizing the following code ...

androidjsongson

Angular-material's Md-dialog popup box is displayed as a separate view within the Yeoman framework

I have recently created a project using Yeoman (angular-fullstack, angular-material) and encountered an issue with triggering the md-dialog box. When clicking on a div element, the dialog box is supposed to appear. However, instead of showing the popup the ...

javascriptjqueryangularjsangular-material