Implementing mock JSON Data in Angular

I'm currently exploring Angular and working on a project that involves retrieving data from an API and displaying it in an HTML table. Right now, I am experimenting with manipulating the table data to update the model (JSON). While I understand that making these changes would require API support, I want to test this functionality using mock data within the JavaScript file.

Could you please review the code in this Fiddle and provide guidance on how I can achieve this?

(function() {
  var app = angular.module('myApp', []);

  app.controller('PeopleController', function($scope, $http) {
    $http({
      url: "https://api.myjson.com/bins/584d5",
      method: "GET"
    }).success(function(data,status) {
      $scope.people = data.people;
    });
  });
})();

Thank you!

Visit Code Pen Here

Answer №1

Are you considering modifying the JSON data? Give a PUT request a shot.

Take a look at your updated codepen here: http://codepen.io/anon/pen/qZRYxZ?editors=1010

$scope.myData = {"people":[{"personName":"Scott Walker","personAge":"43","dateOfBirth":"09-12-1972","location":"Leeds","gender":"male"},{"personName":"Paula Lamb","personAge":"38","dateOfBirth":"02-01-1978","location":"Alberta","gender":"female"},{"personName":"Jonathan Joestar","personAge":"22","dateOfBirth":"02-28-1850","location":"UK","gender":"male"}]};

$http.put('https://api.myjson.com/bins/584d5', $scope.myData)
    .success(function (data) {
    // alert("success!");
});

Answer №2

I have created a plunker specifically for you. All you need to do is make an HTTP request to the location where the JSON file is stored. In this case, it is located at the root directory. However, if it is inside a folder, simply specify the path relative from the index.

$http({
  url: "example.json",
  method: "GET"
}).success(function(data, status) {
  console.log($scope.people);
  $scope.people = data.people;
});

Visit this link for the Plunker example

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

What is the reason behind the functionality difference between json.Unmarshal with reference and pointer types?

The JSON Unmarshal function example has been slightly altered to demonstrate the use of Animal instead of []Animal. The modified code functions correctly without errors. Here is a link to the working example on the Go Playground. // ... var animals Anima ...

The TypeScript fs/promises API is experiencing compilation issues when used in JavaScript

While working with TypeScript and the fs/promises API, I encountered an error when compiling and running the TypeScript code. The error message displayed: internal/modules/cjs/loader.js:968 throw err; ^ Error: Cannot find module 'fs/promises' ...

Blank display with no error notification

Having trouble with a white screen when navigating to the "editarTitulo" state from any origin, and there is no error message. I've searched for a solution in various places but nothing seems to work. Here is my code: Module: (function () { angu ...

Can we break down and explain iterative dynamic imports with conditions in JavaScript?

Is there a way to simplify the named imports and assignments in my code programmatically without repeating myself? I am looking for a solution that involves using a loop. This is what I currently have: import { globalLocale } from './i18n' let ...

Issue encountered - Attempting to provide an object as input parameter to puppeteer function was unsuccessful

Encountering an error when attempting to pass a simple object into an asynchronous function that utilizes puppeteer. The specific error message is: (node:4000) UnhandledPromiseRejectionWarning: Error: Evaluation failed: ReferenceError: userInfo is not def ...

A guide on using JSON data fetched with Javascript to apply CSS styling

I'm currently working on an HTML document with dynamic content that needs to adjust its styling based on data from Google Sheets. I've successfully loaded the JSON data, but I'm struggling to figure out how to dynamically change the CSS. Can ...

Guide to creating a clean and minimalistic tabbed menu using CSS

Looking for CSS code for the tabbed menu shown above. I've tried several options but haven't been able to achieve the exact design I want. Here is the directive, HTML, and CSS code provided: <div id="tabs"> <ul> <li> ...

What could be the reason behind Typescript's unexpected behavior when handling the severity prop in Material UI Alerts?

Trying to integrate Typescript into my react project and encountering a particular error: Type 'string' is not assignable to type 'Color | undefined'. The issue arises when I have the following setup... const foo = {stuff:"succes ...

How to handle non-ASCII characters when encoding in JSON?

I understand that json_encode requires UTF-8 encoding, and I have already ensured that my data is encoded as such. However, when attempting to pass a PHP array to JavaScript, I am encountering difficulties in transferring the data successfully. To test th ...

Showing JSON data as a table in an HTML format

After receiving the JSON String from the server as a response, which can be viewed here, I've implemented the following Jquery Code: function loadCategories() { $.ajax({ type: "POST", url: "/Services/ControllerService. ...

Ensure that at least one mandatory field is implemented with React final form

Here is a code snippet that handles field validation: export const isOneFieldValid = (val: string) => { console.log(val) return val ? undefined : true } ... const validate = (field: string) => { switch (field) { case 'email': { ...

Utilizing AngularJS to assess expressions within an HTML tag

This question presents a unique scenario that sets it apart from other similar questions like those found here or here. The objective here is to "evaluate inside the HTML tag" rather than within a directive or controller. The explanation might be challengi ...

Tips for transferring a jQuery instance to a selector

Can someone help me with using .eq() instead of :eq() I would like to use the following syntax -> $('div').eq(1) Here is the code snippet I need help with: $(document).on('click', 'li.trigger div:eq(1) a.ajax img,' + ...

The elimination function in JavaScript

I've been browsing the Mozilla Developers website, focusing on the concept of the delete operator. In the final section about "Deleting array elements," there are two similar scripts presented, with the only difference being how they modify the array. ...

Tips for quickly applying a masked array to an extremely large JSON dataset

Data Analysis Challenge Currently, I am faced with the task of working on extensive JSON files that are structured as follows: {key: [1000+ * arrays of length 241], key2: [1000+ * arrays of length 241], (...repeat 5-8 times...)} The data is organized ...

adding items into an array with the help of angularjs

The current code is functioning correctly and displaying the desired output, but I now wish to save each string or entry in an array to prevent loss of entered data. Currently, it only works for one item, but I need it to support multiple items and store t ...

Explore the views and routes in node.js using AngularJS

Exploring the integration of AngularJS into a node.js express app has brought up some questions. Once express is set up, the main requirements are routing and a template engine. Typically, setting the app to use Jade as the templating engine would involve ...

Resetting chosen selections in a select element with customized values for the options in AngularJS involves utilizing directives and controllers

I need to reset specific options in a select dropdown by assigning a custom value to the options using angularJS: HTML <select id="" name="" class="form-control" ng-model="mymodel"> <option value="1000">All</option> <option v ...

Opting to utilize a multidimensional JavaScript array or object is a more efficient method

Here is a breakdown in JSON format: jsonResponse Folder 01 Product 01 - Folder 01 Product 02 - Folder 01 Product 03 - Folder 01 Folder 02 Product 01 - Folder 02 Product 02 - Folder 02 Product 03 - Fo ...

Using Jquery toggleClass on a specific icon without impacting the other icons that share the same class

I am currently working on a project where I have multiple divs that each contain an SVG as a background image, specifically for audio player buttons. My goal is to toggle the class of the clicked element without affecting the others. However, I am struggli ...