Passing a variable in an AngularJS $http.get() call to retrieve a specific section of a JSON data file

Currently, I am using json files to stub my $http.get() calls. I am trying to retrieve a specific subset of the json file in my angular controller. Despite looking at other solutions that recommend setting a params property in the Get call, it does not seem to be working for me.

Below is the snippet of my controller code:

 angular.module('agileApp')
.controller('projectController', ['$scope', '$filter', '$http','$routeParams', function($scope, $filter, $http, $routeParams){

$http.get('json/testData.json').success(function(data){

    //console.log(data);
    $scope.projectData = $filter('filter')(data.projectDetail, {Id:1})[0];
    console.log($scope.projectData);
});

}]);

This is an excerpt from my json file:

{ 'projectDetail': [{
    'Id': 1,
    'projectName': 'Project1',
    'projectStatus': 'In Progress',
    'teamMembers': ['User1,'User2', 'User3'],
    'userStories': [
        {'userStoryId': 0,
         'Description': 'As a user blah blah blah 1',
         'storyPoints': 10
        },
        {'userStoryId': 1,
         'Description': 'As a user blah blah blah 2',
         'storyPoints': 10
        },
        {'userStoryId': 2,
         'Description': 'As a user blah blah blah 3',
         'storyPoints': 10
        },
        {'userStoryId': 3,
         'Description': 'As a user blah blah blah 4',
         'storyPoints': 10
        },
        {'userStoryId': 4,
         'Description': 'As a user blah blah blah 5',
         'storyPoints': 10
        },
        {'userStoryId': 5,
         'Description': 'As a user blah blah blah 6',
         'storyPoints': 10
        },
    ]
},

The project detail array contains multiple objects, but I only need to fetch the one where Id matches the routeID parameter passed into the controller.

I would greatly appreciate any assistance on this matter. Thank you!

Answer №1

It appears that your json is not formatted correctly, causing $http.get to return a string instead of an object

There are some syntax errors present, and it is important to note that Angular requires proper quotation marks (which differ from common Javascript).

I conducted a simple test using this plunker

Below is a simplified version of the json data. By examining it, you should be able to easily adjust yours accordingly. (Note: It's " instead of ')

{
  "projectDetail": [
    {
      "Id": 1,
      "projectName": "Test1"
    }
  ]
}

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

CSS media query to target specific viewport width

In my JavaScript code, I am dynamically creating a meta viewport. I set the value of this viewport to be 980px using the following script: var customViewPort=document.createElement('meta'); customViewPort.id="viewport"; customViewPort.name = "vie ...

Can you explain the purpose of the `Sizzle.tokenize` function?

The mysterious function <code>Sizzle.tokenize lacks documentation and comments in the source code. What exactly is its purpose? Explore the code ...

Sharing asynchronous data between AngularJS controllers

Among the multitude of discussions on sharing data between controllers, I have yet to come across a satisfactory solution for my particular scenario. In my setup, one controller fetches data asynchronously using promises. This controller then creates a co ...

Utilize passed props in components as well as Redux state information

Typically, you can access props sent by a parent to a child component on the child component itself. However, when using Redux in child components, the props sent by the parent are lost due to the use of the 'connect' method which maps the Redux ...

Bootstrap is causing issues with unidentified div elements

I recently embarked on creating a slideshow using HTML, CSS, and jQuery. After completing the slideshow, I decided to add an interactive page beneath it. To streamline the layout process, I opted to utilize Bootstrap. However, upon loading Bootstrap, I en ...

Having trouble accessing the scrollHeight property of null when using Selenium WebDriver

I am currently working on a function in my code that is responsible for scrolling the page. This particular function was inspired by code used to scrape Google Jobs, which can be found here. However, I encountered an error that reads "javascript error: Ca ...

The Angular Date Pipe is displaying an incorrect date after processing the initial date value

Utilizing Angular's date pipe within my Angular 2 application has been beneficial for formatting dates in a user-friendly manner. I have successfully integrated API dates, edited them, and saved the changes back to the API with ease. However, an issue ...

How can we achieve the same functionality as React Native's { flex: 1 } in React JS?

I've been diving into React Native development, and now I'm exploring React.js for web applications. However, I'm facing a challenge in creating a simple View that takes up the entire screen to begin experimenting with different components. ...

Retrieving information from JSON files related to table objects

How to Display JSON data in a Table? I am facing difficulty accessing my JSON data as it is nested within an array of objects. How can I retrieve this information? Currently, I am using the map function to display only the name and avatar, but the data s ...

Use the zoom feature on D3 to enhance two graphs in an HTML document

I have been experimenting with d3 libraries lately and came across http://bl.ocks.org/jroetman/9b4c0599a4996edef0ab. I successfully used it to draw a graph based on data from a tsv file and enable zoom in and out functionality, which worked well for me. Ho ...

Refreshing an HTML table using instance variables from a C# class (utilizing jQuery and AJAX)

Explore <script type="text/javascript"> $(document).ready(function () { $("#viewDetails").click(function () { $.ajax( { type: "POST", url: '@Url.Action("GetDetail", "ControllerName")' ...

retrieve information instantly on AngularJS by utilizing $http or $resource

I designed a plugin for field customization. angular.module('ersProfileForm').directive('ersProfileEditableField', ['$templateCache', '$compile', 'profileFieldService', 'RolesService', ...

How is the purpose of nesting functions within functions achieved in nodejs?

Take a look at this example: var tools1 = require('../tools/tools1'); var test_func = function(arg1, arg2, arg3) { var local_var_1 = "lc1"; var local_var_2 = "lc2"; return function(data) { var result = tools1.doSth(local_va ...

Best Practices for Handling Pre-State Setting Mutations in Flux Design Pattern

Currently, I am developing a Vue application utilizing Vuex and following the Flux design pattern. I have encountered what seems to be an inefficient practice of duplicating code in small increments. I am hopeful that this is just a misunderstanding on my ...

Utilizing Angular's ng-repeat with varying directives for each iteration

I am trying to utilize ng-repeat within Angular to iterate through multiple <li> elements with a directive embedded. My goal is to have the first two items in the ng-repeat display differently in terms of styling and content compared to the remaining ...

Sending AJAX information to multiple pages

I have created an HTML page where I am struggling to pass two variables using the POST method to a PHP page. The PHP page is supposed to accept these variables and then call an API to retrieve data based on them. However, my challenge is in receiving this ...

What is the best way to include an external JavaScript file in a Bootstrap project?

I am brand new to front-end development and I'm attempting to create an onClick() function for an element. However, it seems like the js file where the function is located is not being imported properly. I've tried following some instructions to ...

issue arising from integrating material-ui components with code in a react javascript application

Struggling with integrating code and material-ui components in react jsx, I encountered an issue. Here's the problematic snippet: const icols = 0; const makeTableRow = ( x, i, formColumns, handleRemove, handleSelect) => <TableRow key ...

Is there a way to implement an onclick event on a specific line of text that triggers a popup box only when the text is clicked, without the popup appearing automatically when

I received assistance from a fellow user to customize a popup that turned out great. However, I'm having trouble getting the onclick function to work properly so that the popup only appears when the phone number is clicked. Ideally, I want the phone n ...

Retrieve a JSON file with Hebrew data from a server and then interpret it using Node.js

I have a JSON file with dynamic content stored on a remote server acting as an API. The file also includes Hebrew text in its values. How can I retrieve the response and convert it into a JSON object? Here is the code snippet I have put together using Re ...