Refining URL parameters in angular.js

I need help filtering the $routeParams of the data retrieved from a JSON file. Here is my current code snippet:

function PostDetailController($scope, $routeParams, $http) {
    $http.get('json/posts.json').success(function(data){
        $scope.photo = data;
    });
}

Can someone show me how to filter the id based on the URL provided? Below is an example of what my JSON data looks like:

{
    "id": 1,
    "name": "details1",
    "title": "Test Title",
    "description": "Sample Description",
    "image": "img/1.jpg",
    "tags": ["photo", "internet"],
    "user": "hilarl",
    "comments": ["sample comment"],
    "likes": 23,
    "dislikes": 100,
    "resolution": { "x": 150, "y": 58 }
},
{
    "id": 2,
    "name": "details2",
    "title": "Test Title",
    "description": "Sample Description",
    "image": "img/2.jpg",
    "tags": ["photo", "internet"],
    "user": "hilarl",
    "comments": ["sample comment"],
    "likes": 23,
    "dislikes": 100,
    "resolution": { "x": 150, "y": 58 }
}

Answer №1

Imagine having a route set up like this:

$routeProvider.when('/article/:articleId', {...})

In your controller, you can then access the id using $routeParams:

function ArticleDetailController($scope, $routeParams, $http) {
    $http.get('json/articles.json').success(function(data){
        angular.forEach(data, function(item) {
          if (item.id == $routeParams.articleId) 
            $scope.content = item;
        });
    });
}

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 ng-click method on the checkbox input field in AngularJS is not being triggered

I'm trying to trigger a function in a toggle switch using ng-click, but the customerActiveDeactive function isn't being executed. <a title="Active/ Deactivate" > <input type="checkbox" class="js-switch" ng-init="status=True" ng-model ...

Experienced an unexpected setback with the absence of the right-click capability on a Javascript-powered hyperlink, specialized for

I am facing an issue with a hyperlink on my website. This particular hyperlink submits a hidden form using the POST method to redirect users to another site. However, when someone right-clicks on this hyperlink and tries to open it in a new tab, they are o ...

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

What is the process for creating a symbolic link from a project's node_modules directory?

Recently, I've been learning how to build a Password Manager using React, Node.js, and MYSQL by following a tutorial. However, I encountered an issue where the file /EncryptionHandler was located outside of the src/ directory of my project. Even thoug ...

Steps for automatically adding a new user to the AddThis service for configuring analytics services

As I work on creating a Backoffice for my website, I am looking to provide a mobile version for all users uniformly. To enhance user experience, I plan to introduce a "Report" tab in the back office interface. This tab will display analytics information g ...

What might be causing the sudden shifts in element positions during TweenLite animation?

I have created a demo of my code in this JSFiddle and also included it below. The issue I am facing occurs in Google Chrome, so I would recommend using that browser to replicate and fix the bug. Please note that the code is a snippet from a larger project ...

Cross-Origin Resource Sharing (CORS) for HTML

Here is a code snippet I found on http://jakearchibald.com/scratch/alphavid/ $("#video").append('<video id="movie" style="display:none" autobuffer><source id="srcMp4" src="https://host-away-from-host.com/file.mp4" type=\'video/mp4; ...

Can anyone provide guidance on shifting the IconButton to the right side of the Tab?

I have an AppBar with a tab and an IconButton. I'm trying to position the IconButton on the right side using float: right, but it doesn't seem to work. This is how it currently looks: https://i.sstatic.net/yyf32.png I also created a code sandbo ...

When using Rspec and Capybara, utilizing jQuery to set focus on an element may not apply the `:focus` CSS as expected

I have implemented jump links for blind and keyboard users on my website, but I've hidden them off-screen visually. When these links gain focus, they are moved into the viewport. Trying to test this behavior using RSpec and Capybara has been unsucces ...

Developing unit tests for a module responsible for generating Json REST services

Just completed working on https://github.com/mercmobily/JsonRestStores. Feeling a bit nervous since I haven't written any unit tests yet. This module is quite complex to test: it enables the creation of Json REST stores and direct interaction with th ...

Connecting the search results page with the specific details page

Currently, I am developing a results page for my website and require assistance with linking each restaurant to a detail.php page. The project involves showcasing all the restaurants in San Francisco along with their health inspection scores, address, and ...

Vue.js computed property: [Vue warn]: Oops, looks like there's a hiccup in the render! Error: "TypeError: Unable to access property 'userId' of an undefined variable"

Just trying my hand at Vue.js, so bear with me if this seems too simple. I've got the code for Home.vue here: <template> <div class="home"> <div> <b-table striped hover :items="borrowingHistroy"> ...

Encountering a Console warning while working with the Material UI menu. Seeking advice on how to resolve this issue as I am integrating HTML within a text

Caution: PropType validation failed. The prop text provided to LinkMenuItem is invalid as it should be a string, not an object. Please review the render method of Menu. Below is the code snippet: var menuItems = [ // text is not valid text { route: &ap ...

Perform activities within a component responsible for displaying a flatlist

I have a component called Post that I'm using to display posts within a FlatList. Currently, the Post component only shows text and images in the Flatlist. However, within the Post component, there are buttons that should have functionality such as de ...

What is the best way to utilize the react hook useEffect just once in my scenario?

After looking into it, I realized that my question may seem like a duplicate at first glance, but upon further inspection, I found that it is not. I have come across many questions with the same title but different cases. The issue I am facing is that I h ...

The appearance of the image varies between Chrome and Internet Explorer

Greetings fellow web developers! Currently, I am facing an issue with a logo embedded in a navigation bar displaying differently in Chrome compared to IE version 10 running document standards. The webpage is utilizing bootstrap CSS. Here is the code snippe ...

Delivering an Angular 1.x app through Express while granting access to static directories

I have configured my Express server like this: // src/server/server.js var express = require('express'); var app = express(); app.use('/libs', express.static('./node_modules/')); app.use('/app', express.static(&apo ...

JavaScript is reliant on the presence of the alert() function to properly function

I have a JavaScript function that performs well, except for when I remove or comment out the alert() line. This function is designed to calculate the sum of values in up to 30 fields if they are present and contain a value. Here is an example of the HTML ...

"What is the best way to programmatically set all options as selected in an HTML select element using JavaScript

There are two select tags in HTML. The first one includes all the countries in the world, while the second only contains the countries that the user has selected. <form action="/fixsongs.fix"> <table> <tr> < ...

Error: Express JS custom module cannot be located in the root directory's modules folder

The file structure of my express js app resembles thishttps://i.sstatic.net/57NIQ.png I'm attempting to load a modules folder from the root directory. routes/users.js var express = require('express'); var router = express.Router(); var md ...