Getting articles based on identification

I have received a JSON object from my WordPress site, here is what it looks like:

{
        "ID": 4164,
        "title": "24-Hour Non-Stop with Marco Carola",
        "status": "publish",
        "type": "post",
        "author": {
            "ID": 11,
            "username": "VIlma Quiros",
            "registered": "2015-04-16T07:04:04+00:00",
            "meta": {
                "links": {
                    "self": "http://urbanetradio.com/wp-json/users/11",
                    "archives": "http://urbanetradio.com/wp-json/users/11/posts"
                }
            }
        },
        "content": "<p class=\"p2\"><a href= 

Here is the code snippet for my service:

.service('FreshlyPressed', function($http, $q) {
  return {

    getBlogs: function($scope) {
      var posts = [];
      $http.get('http://urbanetradio.com/wp-json/posts')
        .success(function(result) {
          $scope.posts = result;
        })
    },

    getPostById: function(postId) {
      var url ='http://urbanetradio.com/wp-json/posts/postId';
      return $http.get(url);
    }

});

This is the controller section of the code:

.controller('NewsCtrl', function($scope, FreshlyPressed) {

  $scope.posts = [];

  $scope.doRefresh = function() {
    $scope.posts = FreshlyPressed.getBlogs($scope);
    $scope.$broadcast('scroll.refreshComplete');
  }
  $scope.doRefresh();

});

The following part explains the desired outcome:

In the main view, only the title and date of the posts should be displayed. Clicking on the title should direct you to the full post in the secondary view.

<a ng-href="#/tabs/news/{{post.ID}}">
    <h2 ng-bind-html="post.title"></h2>
    <p>{{:: post.date | date}}</p>
  </a>

For viewing the entire post in the second view:

<div class="item item-text-wrap item-image padding">
    <div class="special-font" ng-bind-html="post.content"></div>
  </div>

Lastly, the routes are defined as follows:

//Main view route

.state('tabs.news', {
    url: '/news',
    views: {
      'tab-news': {
        templateUrl: 'templates/tab-news.html',
        controller: 'NewsCtrl'
      }
    }
  })

//Secondary view route for displaying full post

.state('tabs.post-detail', {
  url: '/news/:postId',
  views: {
    'tab-news': {
      templateUrl: 'templates/tab-post-detail.html',
      controller: 'PostDetailCtrl'
    }
  }
})

An error has been encountered:

GET http://urbanetradio.com/wp-json/posts/postId 404 (Not Found)

Answer №1

It seems like a necessary adjustment is needed in this function:

getPostById: function(postId) {
      var url ='http://urbanetradio.com/wp-json/posts/'+ postId;
      return $http.get(url);

Based on your code, it appears that postId is the parameter you wish to replace in the string. Therefore, you should concatenate the value within the string as shown in the code snippet provided above.

To invoke the method, use the following syntax:

FreshlyPressed.getPostById(1);//1 represents the postid value 

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

Are you making alterations to the URL?

Is there a way to change the displayed URL on a webpage to show "bananas" instead of "http://example.com/" after the page has loaded? ...

Pursue cellular devices

Looking to customize CSS media queries specifically for mobile devices, like so: @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) { /* yo ...

Utilizing ng-bootstrap within a rebranded module

I'm facing an issue with my nav-bar module that utilizes ng-bootstrap: import {NgModule, NgZone} from '@angular/core'; import { CommonModule } from '@angular/common'; import {NavigationComponent} from "./components/navigation/navi ...

Make sure to select the checkbox using a protractor only if it hasn't been checked already

I am attempting to retrieve a list of checkboxes using CSS and only click on a checkbox if it is not already selected. I have successfully obtained the list, but I am encountering an issue when trying to validate whether or not the element is selected. Ca ...

Utilize CSS to specifically target the image source within a button and swap it with a different image in the Woocommerce Wishlist Plugin on your Wordpress

I have integrated the Woocommerce Wishlist plugin into my Wordpress website and I am looking to customize the appearance of the 'Add to Wishlist' button. Upon inspecting the source code, I noticed that the button is styled with a GIF image. I wou ...

Converting Wordpress custom field data into an array within a query output

I decided to create a unique field called "sec1array" within my categories to store an array of numbers such as 1,2,3,4 To retrieve and display this array within a loop, I wrote the following code: $seconearray = array($cat_data['sec1array']); ...

Unable to reset iframe style height in IE8 using JavaScript

I am encountering an issue with resetting the height of an iframe using JavaScript. Here is the code snippet I am working with: var urlpxExt = document.getElementById('urlPx'); urlpxExt.style.height = "200px"; While this approach works well in m ...

Can you please explain the process of retrieving the value of an item from a drop-down menu using JavaScript?

I am currently developing a basic tax calculator that requires retrieving the value of an element from a drop-down menu (specifically, the chosen state) and then adding the income tax rate for that state to a variable for future calculations. Below is the ...

Is there a more efficient method for generating dynamic variable names from an array aside from using eval or document?

I need help figuring out how to create an array in JavaScript or TypeScript that contains a list of environment names. I want to iterate over this array and use the values as variable names within a closure. My initial attempt looks like this (even though ...

Error: The function "this.state.data.map" is not defined in ReactJS

class Home extends Component { constructor(props) { super(props); this.state = { data: [], isLoaded: false, }; } componentDidMount() { fetch("https://reqres.in/api/users?page=2") .then((res) => res.json ...

The 'formGroup' property cannot be bound in the LoginComponent because it is not recognized as a valid property of the 'form'

When working on my Angular project and using ReactiveFormsModule to create a form, I encountered an error message during the build process. The specific error was: src/app/security/login/login.component.html:11:13 - error NG8002: Can't bind to ' ...

Issue: Connection Problem in React, Express, Axios

I've encountered an issue while attempting to host a website on an AWS EC2 instance using React, Express, and Axios. The specific problem I'm facing is the inability to make axios calls to the Express back-end that is running on the same instanc ...

What could be causing the npm server error in my Vue.js application?

After recently setting up Node.js and Vue.js, I decided to dive into my first project on Vue titled test. As part of the process, I attempted to configure the server using the command: npm run server However, I encountered the following error message: C ...

I encountered a problem with routing in my MERN project while trying to implement a feature I learned from a YouTube tutorial

My first question on stackoverflow. To summarize: I followed a YouTube video and downloaded the course code from the GitHub link provided, but I'm encountering routing issues despite reading similar questions on stackoverflow. I've been followi ...

Redirecting in PHP after an AJAX request is made

I'm trying to figure out how to redirect to another page in PHP code within an AJAX call. I've searched online and found suggestions to use JavaScript like window.location.href = 'url';, but it doesn't seem to be working for me. W ...

What is the best way to retrieve resource files within a PHP class?

My CMS class depends on a file called "DB.json" Here is the code I am using: class CMS{ function __construct(){ $DB = json_decode(file_get_contents("DB.json")); } } This code functions properly when the file I'm requiring the class from is ...

What is the purpose of defining browserify paths?

Here's a link to the gulpfile.js file where you can find the build-js task definition using browserify paths: https://github.com/jhades/angularjs-gulp-example/blob/master/gulpfile.js. I'm puzzled about the necessity of explicitly defining paths l ...

Setting up multiple classes in my unique situation

Setting up an ng-class in my app My current setup looks like this: $scope.myClass = 'class-A'; Performing a task here... $scope.myClass ='class-B'; Performing another task here $scope.myClass ='class-C'; html <div n ...

Decoding JSON Data from PHP to JavaScript using jQuery

I am currently working on an autocomplete script where I pass variables through JSON. However, I am facing a challenge in decoding the JSON data. Below is a snippet of the JSON code I have received and my goal is to convert it into a simple JavaScript arr ...

Embedding various files onto a webpage using the file attribute

I came across some code that allowed me to add multiple files using a single input element on my page. The code can be found here: However, as someone who is new to JavaScript, I faced difficulties in customizing it to my needs. What I really want is to h ...