Creating a comparison display using ng-repeat

I have a JSON file that contains revision and history information about a modified entity, including its old and new values. The diff is generated using the jsondiffpatch library and I have parsed it further to create the final JSON format for rendering.

Here is an example of the data:

[
  {
    "createdBy": "admin@localhost",
    "modifiedAt": 1445113889873,
    "left": [
      {
        "Status": "Open"
      }
    ],
    "right": [
      {
        "Status": "In Progress"
      }
    ]
  },
  {
    "createdBy": "admin@localhost",
    "modifiedAt": 1445114315786,
    "left": [
      {
        "Description": "hello"
      },
      {
        "Assignee": "Uncle Bob (test@test)"
      }
    ],
    "right": [
      {
        "Description": "bye"
      },
      {
        "Assignee": "Willy Wonka (willy@hello)"
      }
    ]
  }
]

I am trying to find a good way to display this data in a table where each revision has separate columns for the left and right values displayed on different rows. I'm having trouble figuring out how to use ng-repeat for this:

<div ng-repeat="(key, value) in vm.revisions | orderBy:'-modifiedAt'">
      <table class="table">
        <thead>
        <tr>
          <th width="20%">Field</th>
          <th width="40%">Old Value</th>
          <th width="40%">New Value</th>
        </tr>
        </thead>
        <tbody>
        <tr>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        </tbody>
      </table>
    </div>

I hope the result will look something like this:

Thank you in advance!

Answer №1

If my assumptions about the data format are correct:

<div ng-repeat="revision in vm.revisions | orderBy:'-modifiedAt'">
  <table class="table">
    <thead>
      <tr>
        <th width="20%">Field</th>
        <th width="40%">Old Value</th>
        <th width="40%">New Value</th>
      </tr>
    </thead>
    <tbody ng-repeat="(index, left) in revision.left">
      <tr ng-repeat="(field, leftValue) in left">
        <td>{{field}}</td>
        <td>{{leftValue}}</td>
        <td>{{revision.right[index][field]}}</td>
      </tr>
    </tbody>
  </table>
</div>

Check out a demonstration on jsfiddle: http://jsfiddle.net/q6zqgfr8/

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

Modifying several items with Ramda's lens

I am currently working with a data structure that is structured similarly to the following: var data = { "id": 123, "modules": [{ "id": 1, "results": [{ "status": "fail", "issues": [ {"type": "ch ...

Error encountered in AWS Lambda: JSONDecodeError - Anticipating a value at line 1, column 1

I'm currently working on a AWS Lambda function that aims to push the SQS queue output into an S3 bucket. However, I'm encountering issues as the lambda function fails to push the message. The CloudWatch log displays: JSONDecodeError: Expecting v ...

Converting MySQL to JSON leads to an issue where the Google visualization chart appears empty, showing no data

I have been experimenting with code to generate a pie chart using data retrieved from a database. Here's the snippet I am currently working with: <script type="text/javascript"> google.charts.load("current", {packages:["corechart"]}); googl ...

Determining the height of the first element in jQuery

I am dealing with multiple elements that share the same class but have different heights. The class 'xyz' is only for styling borders, as shown below: <div class='xyz'></div> //1st element height=10px <div class='xy ...

"Implement a script in Python to substitute a keyword for a specific data key

How can I update an old JSON file where the key names 'logic_1' and 'logic_2' are changed to just 'logic'? (Note: The data is retrieved from a JSON file with multiple entries obtained through a loop) [ { "logic_1" ...

Configuring Tailwind CSS with PostCSS in a Nuxt project

Error Message "In order to avoid issues with features like alias resolving inside your CSS, please make sure to use build.postcss in your nuxt.config.js file instead of an external configuration file. Support for external config files will be depreca ...

Expand the scope of the javascript in your web application to cater

I am in the process of creating a web application that utilizes its own API to display content, and it is done through JavaScript using AJAX. In the past, when working with server-side processing (PHP), I used gettext for translation. However, I am now ...

Why does it appear that Angular is undefined in this straightforward Angular demonstration?

I'm completely new to AngularJS and I've encountered an issue. Yesterday, I ran a very simple AngularJS application that I downloaded from a tutorial and it worked perfectly. The application consists of 2 files: 1) index.htm: <!DOCTYPE htm ...

Change the background color of a table cell based on its value with the help of JavaScript

I am attempting to apply color to cells in an HTML table (generated automatically by Python and Django) based on the content of the cells. Below is my table. I want to specifically color the column "status". Whenever the word "Cloture" appears, I would li ...

Upon submission in Vue, the data variable becomes undefined

I set isError to false in the data, but when there is an error from Laravel, I receive a 422 error. I want to then set isError to true, but when I do, I get an error in the console saying that isError is undefined even though it has been defined. What coul ...

JQuery Datatables: Struggling to make JQuery function work following AJAX update

Watch this screencast to get a clearer understanding of the issue.... I'm currently working on my first project involving AJAX, and I'm encountering some obstacles. The datatable is loading user details from a JSON output using AJAX. Each row ...

How can I implement Jquery validation engine ajax for two different fields using the same function?

The jQuery validation engine plugin has a unique feature of performing ajax validation. However, there is a minor inconvenience with this functionality. Instead of validating the field name, it sends the field ID for validation. Why does this pose a prob ...

Enhance your bookmarking experience with Vue mixins that allow you to easily customize the color

Looking for a way to efficiently bookmark pages in my application, I have successfully implemented a feature where I can add pages by their name and URL into bookmarks. Upon clicking the bookmark button, it changes color to indicate that the page has been ...

How do I retrieve a specific value from the JSON response using JSONObject?

I have a response with important values that I need to extract. private void getDataFromDistanceMatrixToSaveAndAddToList( GRATestDataImport place, String response) { JSONObject responseAsJson = new JSONObject(response).getJSONArray("rows&q ...

What could be the reason for the datepicker popup failing to appear?

I am currently working on developing a custom bootstrap datepicker directive: app.directive('datePicker', function ($compile, $timeout) { return { replace: true, restrict:'E', templateUrl: 'datepicker.h ...

What is the best way to choose the unique identifier of an HTML element inside a for loop in a Django template?

I need help selecting an HTML button that is generated within a for loop in a Django template using JavaScript. How can I assign a unique ID to each button and select it correctly in JavaScript? Currently, all buttons have the same ID within the loop, resu ...

Stopping a NodeJs file running on an Ubuntu server

After enlisting help to install a Js script on my server, I encountered an issue where changes I made to the scripts/files were not reflected in the browser. After scouring the internet for answers for about 24 hours, I discovered that Js scripts need to b ...

Sending numerous HTML forms using a sole submit button through AJAX

On my website, I have a page named publish.php where users can input details for each image they upload. Each image has its own form, but only one form is displayed at a time in a tabbed layout when the user clicks on the corresponding thumbnail. I want to ...

The complexities of stopPropagation() causing further confusion

I have encountered an issue with my code. It currently allows a dropdown functionality for a <ul> element, but when a child <li> is clicked, it also closes other menus of the same type. To fix this, I used an if clause to check if the clicked ...

Finding the commit ID through a Gerrit SSH query

I'm attempting to retrieve and store the commit ID for a specific gerrit commit. This command effectively provides all the information about the commit: ssh -p <port-num> <host> gerrit query --current-patch-set <change-id> This com ...