Retrieving a single post from a JSON file using AngularJS

I'm currently delving into AngularJS, but I seem to be stuck on what might be a simple issue.

At the moment, I have some hardcoded JSON files with a few persons in them and no actual backend set up yet. In my form, I aim to display a single person each time. Most of the examples I've come across involve querying for lists or making calls to a REST service with parameters. I'm uncertain how to adapt this approach to my prototype?

The current code successfully retrieves my JSON file and displays the single entity within it. However, once there are multiple entities (let's say 10), I would like to search for a specific one. My next goal is to implement "like" searches and present the results in a modal list... at least, that's the plan.

Here's a snippet of my HTML:

.......
<div class="form-group">
 <label for="inputId" class="col-lg-2 control-label">PersonId</label>
 <div class="col-lg-6">
  <input type="text" class="form-control" id="inputId" ng-model="person.personid">
 </div>
<button class="btn btn-mc" ng-click="getPerson()">Search</button> 
</div>

My Controller:

.........
.controller('MainCtrl', ['$scope', 'Person', function($scope, Person) {
            $scope.person = Person.get();

My Service:

 angular.module('myApp.personServices', ['ngResource'])
    .factory('Person', ['$resource',
        function ($resource) {
            return $resource('persons/person.json/:personid', {}, {
                get: {method:'GET', isArray:false}
                });
            }]);   

Best regards,

Answer №1

Do you find this example helpful? http://docs.angularjs.org/api/ng.filter:filter

If you are working with large amounts of data, it may be necessary to perform filtering on the server side. Loading millions of entries into memory and then filtering can be too costly.

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

Dynamic loading of JavaScript/HTML content using jQuery Mobile and PhoneGap

I am currently in the process of building a mobile app using Dreamweaver CS6 (with PhoneGap), along with jQuery Mobile and JavaScript. This app aims to gather user-inputted form data, convert it into a JSON object, and send it to a python web service. The ...

Exploring the intricacies of defining Vue component props in TypeScript using Vue.extend()

Here is a simple example to illustrate my question When I directly define my props inside the component, everything works fine <script lang="ts"> import Vue, { PropType } from "vue"; export default Vue.extend({ props: { col ...

Displaying the format when entering a value with react-number-format

How to Display Format Only After Full Value Inserted in react-number-format I recently implemented the react-number-format package for formatting phone numbers. import { PatternFormat } from 'react-number-format'; <PatternFormat value={v ...

Preserving form data using JavaScript exclusively upon submission

Hey there! I'm facing a little issue with a Form that has multiple checkboxes and a piece of JavaScript code designed to save the state of each checkbox when the user hits submit. My problem is that, currently, the checkbox state is being saved even i ...

What is causing the issue with passing the parameter in this angular $http.put method?

Encountering a strange issue in my angularjs application. The code snippet works perfectly fine in a factory: $http.put(apiBase + 'delete?id='+orderId); This code connects to an API endpoint to execute a PUT operation (referred to as "delete" b ...

Creating a table in HTML using the innerHTML property

document.getElementById("outputDiv").innerHTML = ""; document.getElementById("outputDiv").innerHTML += "<table border=1 width=100%><tr>"; for(j=1;j<=10;j++) { document.getElementById("outputDiv").innerHTML += "<td align=center>"+St ...

incorporating a dynamic parameter into the payload of an AJAX post request

I'm currently working on a function call where I want to extract the value of the variable data and place it in the data section of the function. However, despite my efforts, I haven't been successful so far. In PHP, I am attempting to retrieve t ...

Cycle through the list and populate the table with the data

My attempt to clarify this explanation is my best, as articulating exactly what I am trying to achieve is quite challenging: Initially, I have a list of names: { "Items": [ { "Id": 0, "Name": "Robinson" }, ...

Using JavaScript, concatenate text from each line using a specified delimiter, then add this new text to an unordered list element

I am looking to extract text from named spans in an unordered list, combine them with a '|' separating each word within the same line, and append them to another ul. Although my code successfully joins all the words together, I'm struggling ...

Tips for ensuring only one property is present in a Typescript interface

Consider the React component interface below: export interface MyInterface { name: string; isEasy?: boolean; isMedium?: boolean; isHard?: boolean; } This component must accept only one property from isEasy, isMedium, or isHard For example: <M ...

Maintain the selected image

I am working on a program that allows users to choose images and I have given them the pseudo-class. .my_image_class:hover{ border:3px solid blue; -webkit-box-sizing: border-box; } This makes the images bordered in blue when hovered over, giving a "sele ...

Transforming the text to a new line

I have been attempting to format lengthy texts from a JSON file, but I haven't been successful. The text keeps displaying as multiple sections within a single response, which can be seen in the image below. I've tested solutions like word-break a ...

The outcomes from using MySQL's JSON_TABLE may appear distorted

My goal is to extract JSON values from MySQL query. I have 3 JSON arrays with the same number of values: { "0": "", "faults": [ "Damaged Load Cell Housing", "Damaged Top Plate" ] ...

What are the benefits of using one state in React with useState compared to having multiple states?

Is it more beneficial to optimize and enhance code readability in React using Hooks and Functional components by utilizing a single setState hook or having multiple hooks per component? To further elaborate, let's consider the following: When workin ...

What is the best way to set a default selected value in an input text box?

Incorporating the typeahead feature into my project has been incredibly useful: <input type="text" ng-model="customPopupSelected" placeholder="Custom popup template" uib-typeahead="state.id as state.desc for state in states | filter:{name:$viewValue ...

Encountering problems with ajax technology

As a newcomer to Laravel and Ajax, I am facing an issue with displaying the state of the selected country in a dropdown list. Although the data is successfully fetched from Laravel and received through Ajax, I am struggling to dynamically add it to the H ...

Is there a problem with the Drag and Drop API?

So here's the deal: I've encountered a problem with the HTML5 Drag and Drop API. In short, besides the essential dragstart, dragover, and drop events, there are three more events - mousedown, mouseup, and mouseleave - that are crucial for achiev ...

Guide on how to indicate the specific sheet on a Google Sheets API node.js batchUpdate request

I need to insert a blank row above all the data on the second sheet, but I'm having trouble specifying the exact sheet. Right now, the empty row is being added to the first sheet. const request = { spreadsheetId: 'spreadsheetId', ...

What is the best way to transfer information between two views in Aurelia?

I have two different perspectives, one called logo and the other called folder. The logo view should display something from the folder view if the folder is empty. logo.html <template> <require from="company-assets/folders"></require> ...

What is the best way to pass a value to a modal and access it within the modal's component in Angular 8?

How can I trigger the quickViewModal to open and send an ID to be read in the modal component? Seeking assistance from anyone who can help. Below is the HTML code where the modal is being called: <div class="icon swipe-to-top" data-toggle="modal" da ...