angular ng-repeat must be adjusted with modifications in the data received from a JSON file

Question

angular ng-repeat must be adjusted with modifications in the data received from a JSON file

Dealing with a JSON object that has incorrect data, my aim is to replace the existing value with one from a lookup table. However, I am unsure of how to swap out the data with values from the lookup table.

lookupTable = {
  "pizza": function() {
    console.log("food");
  },
  "house": function() {
    console.log("building");
  },
  "air": function() {
    console.log("nothing");
  }
};
$scope.value = lookupTable["pizza"]()

The HTML file contains:

<tr ng-repeat="x in names">
    <td>{{ x.lookupTable["pizza"]() }}</td>

You can find my code at http://plnkr.co/edit/w4lOFVRo9vSi8vqfbpXV?p=preview

Would greatly appreciate any assistance!

javascript angularjs json

Answer 1

Answer №1

There are a few issues in the code you provided:

The functions within the `lookupTable` are not returning actual values, as mentioned in earlier responses.
`lookupTable` is not a property of `$scope.names`, so referencing it with `x.lookupTable` is incorrect.

To address these problems, follow these steps:

Ensure that the functions in `lookupTable` actually return values instead of just logging them to the console.
Bind `lookupTable` to `$scope` correctly.
Use `lookupTable` directly in the view since it is bound to `$scope`.

Here is the revised code snippet:

<div ng-app="myApp" ng-controller="customersCtrl">
  <table>
    <tr ng-repeat="x in names">
      <td>{{ lookupTable[x.Name]() }}</td> 
    </tr>
  </table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("data.json")
  .then(function(response) {
    $scope.names = response.data.records;
  });


  $scope.lookupTable = {
    "pizza": function() {
      return 'food';
    },
    "house": function() {
      return 'building';
    },
    "air": function() {
      return "nothing";
    }
  };

});
</script>

Answer 2

There are a few issues in the code you provided:

The functions within the `lookupTable` are not returning actual values, as mentioned in earlier responses.
`lookupTable` is not a property of `$scope.names`, so referencing it with `x.lookupTable` is incorrect.

To address these problems, follow these steps:

Ensure that the functions in `lookupTable` actually return values instead of just logging them to the console.
Bind `lookupTable` to `$scope` correctly.
Use `lookupTable` directly in the view since it is bound to `$scope`.

Here is the revised code snippet:

<div ng-app="myApp" ng-controller="customersCtrl">
  <table>
    <tr ng-repeat="x in names">
      <td>{{ lookupTable[x.Name]() }}</td> 
    </tr>
  </table>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("data.json")
  .then(function(response) {
    $scope.names = response.data.records;
  });


  $scope.lookupTable = {
    "pizza": function() {
      return 'food';
    },
    "house": function() {
      return 'building';
    },
    "air": function() {
      return "nothing";
    }
  };

});
</script>

Answer 3

Answer №2

It appears that your code is quite convoluted. I attempted to make some edits on your plunker, which might be easier to comprehend than trying to explain it.

<!DOCTYPE html>
<html>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="customersCtrl">

    <table>
      <tr ng-repeat="x in names">
        <td>{{ lookupTable[x.Name] }}</td> 
      </tr>
    </table>

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("data.json")
        .then(function(response) {
          $scope.names = response.data.records;
      });

    
    lookupTable = {
      "pizza": "food",
      "house": "building",
      "air": "nothing"
    };
    $scope.lookupTable = lookupTable;
    $scope.value = lookupTable["pizza"]
    console.log(lookupTable["house"]) 
    });
  </script>

Answer 4

It appears that your code is quite convoluted. I attempted to make some edits on your plunker, which might be easier to comprehend than trying to explain it.

<!DOCTYPE html>
<html>
<scriptsrc="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

  <div ng-app="myApp" ng-controller="customersCtrl">

    <table>
      <tr ng-repeat="x in names">
        <td>{{ lookupTable[x.Name] }}</td> 
      </tr>
    </table>

  </div>

  <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
      $http.get("data.json")
        .then(function(response) {
          $scope.names = response.data.records;
      });

    
    lookupTable = {
      "pizza": "food",
      "house": "building",
      "air": "nothing"
    };
    $scope.lookupTable = lookupTable;
    $scope.value = lookupTable["pizza"]
    console.log(lookupTable["house"]) 
    });
  </script>

Answer 5

Answer №3

Upon reviewing your code, it appears unclear what you are attempting to accomplish.

The ng-repeat is generating three objects from the names list, however none of them contain a lookupTable property, causing {{ x.lookupTable["pizza"] }} to fail without throwing any errors.

To make it display properly, try binding to {{ x }} instead.

Answer 6

Upon reviewing your code, it appears unclear what you are attempting to accomplish.

The ng-repeat is generating three objects from the names list, however none of them contain a lookupTable property, causing {{ x.lookupTable["pizza"] }} to fail without throwing any errors.

To make it display properly, try binding to {{ x }} instead.

angular ng-repeat must be adjusted with modifications in the data received from a JSON file

Answer №1

Answer №2

Answer №3

Similar questions

Tips for sorting through various elements or items

Can Angular and Falcor work well together?

Consistent integration into React component

In Bootstrap 5, clicking inside a dropdown should not cause it to open or close unexpectedly

Having trouble making the swing effect trigger on mouseover but not on page load

Click event recursion occurs due to the use of $.post

Swipe JS: tap on the edge to view the next item

Error: undefined callback function in asynchronous parallel execution

Experiencing CORS issue on the frontend while using Django backend

"Using only JavaScript to target and manipulate child elements within the

How come the index variable doesn't show the index in *ngFor loop in Angular 2?

Adding and Removing Attributes from Elements in AngularJS: A Step-by-Step Guide

When a specific string is found in a textbox, trigger a function in JavaScript

Changing a URL parameter based on the element's width is a simple task when

Guide to setting up Date Range Validator within MVC 4

Looking to eliminate the usage of hostname, username, and password in PHP code

Having difficulty sending Crypto JS encrypted data through an ajax request

Exploring AngularJS navigation paths and searching capabilities

Obtaining the client's IP address using socket.io 2.0.3: a comprehensive guide

Error: Attempting to access the first element of a null property is not allowed