Extracting data from a JSON file and displaying it using Angular

I'm facing a challenge with parsing two JSON format data and displaying them in Angular. I'm unsure of how to proceed and need guidance. The second data includes a plan_id that refers to the "plan" data. How can I create a small lookup object to match the "plan" using the plan_id? The JSON files and my index are provided below:

{  
   "plans":[  
      {  
         "id":1,
         "code":"NEXT_DAY_500gm",
         "name":"Next Day less than 500gm",
         "cost":55,
         "duration":24,
         "min_weight":0,
         "max_weight":500,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      ...
   ]
}

[{  
   "id":23,"sender_id":3,"courier_id":0,"deliverer_id":0,"status":"PENDING",...,"plan_id":2,...},
   ...
]

index.html

<!DOCTYPE HTML>
<html>
    <head>
        <title>Reports </title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

</head>
<body ng-app="reportApp" ng-controller="mainCtrl">
    <table>

    </table>

</body>

I'm stuck on how to proceed. Any advice on parsing and displaying the JSON data in Angular would be greatly appreciated. Thank you for your help!

javascriptjsonangularjs

Answer №1

Assign your JSON object to a scope object variable and remember to use terminators (;) where necessary. This example should help guide you.

$scope.jsonScopeObject={  
   "plans":[  
      {  
         "id":1,
         "code":"NEXT_DAY_500gm",
         "name":"Next Day less than 500gm",
         "cost":55,
         "duration":24,
         "min_weight":0,
         "max_weight":500,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":2,
         "code":"NEXT_DAY_500gm_1kg",
         "name":"Next Day 500gm to 1kg",
         "cost":70,
         "duration":24,
         "min_weight":501,
         "max_weight":1000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":3,
         "code":"NEXT_DAY_1kg_2kg",
         "name":"Next Day 1kg to 2kg",
         "cost":95,
         "duration":24,
         "min_weight":1001,
         "max_weight":2000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":4,
         "code":"SAME_DAY_500gm",
         "name":"Same Day less than 500gm",
         "cost":95,
         "duration":8,
         "min_weight":0,
         "max_weight":500,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":5,
         "code":"SAME_DAY_500gm_1kg",
         "name":"Same Day 500gm to 1kg",
         "cost":130,
         "duration":8,
         "min_weight":501,
         "max_weight":1000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      },
      {  
         "id":6,
         "code":"SAME_DAY_1kg_2kg",
         "name":"Same Day 1kg to 2kg",
         "cost":165,
         "duration":8,
         "min_weight":1001,
         "max_weight":2000,
         "COD":1,
         "created_at":"-0001-11-30 00:00:00",
         "updated_at":"-0001-11-30 00:00:00"
      }
   ]
}

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Pathao Reports </title>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>

    </head>
    <body ng-app="reportApp" ng-controller="mainCtrl">
        <table>
             <th>head1</th>
             <th>head2</th>


        </table>
        <tbody>
              <tr ng-repeat="data in jsonScopeObject.plans">
                 <td>{{data.id}}</td>
                 <td>{{data.code}}</td>

              <tr>
        </tbody>



</body>

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 syntax for referencing a nested dictionary within a Python dictionary?

This issue has been resolved successfully How can I access the topic key in the questions data structure? I want to filter my list for all questions with a specific topic and then retrieve all details about a random question. However, when executing the ...

pythonjson

Angular Automatically Generated Identifier for Event Detection

By using jQuery, I can easily target an ID that starts with "conditionValue" $(document).on('focus', "[id^=conditionValue]", function (event) { // code }); But how can I achieve the same in Angular when looking for an ID starting with somet ...

javascriptjqueryangularjsangularjs-scope

Error: Unable to assign value to the innerHTML property of an undefined element created by JavaScript

When designing my html form, I encountered an issue where I needed to display a message beneath blank fields when users did not fill them out. Initially, I used empty spans in the html code to hold potential error messages, which worked well. However, I de ...

javascripthtml

Generating JSON data on the fly using D3.js scripting

I am attempting to create a JSON object dynamically by pulling data from an array in D3 JavaScript. (The code below is not the exact one I used, but similar) let radius = [10,20,30]; let jsonradius = '[{'; for (let i = 0; i < radius.le ...

javascriptjsondynamicd3.js

Expanding the size of one div causes the surrounding divs to shift positions

I am currently working on creating a row of divs that expand when hovered over by the mouse. I have managed to achieve this functionality, but now I want the expanding div to cover its neighboring divs partially, without affecting their sizes or moving the ...

javascripthtmlcss

Troubleshooting issue with parsing MySQL data in HTML table using Node.js

Seeking Assistance! I am currently in the process of developing a node file that displays data from MySQL on an HTML page with a search bar. My issue is that sometimes when I run the code, enter something into the search bar and hit the button, it works s ...

javascriptjqueryhtmlnode.js

What could be the reason for Jest flagging CSS as untested instead of identifying untested functions?

While working on my vue3 project and writing tests with jest, I have encountered an issue where jest is incorrectly marking the CSS within several single file components as untested, even though it doesn't need to be tested. Moreover, its assessment ...

javascriptvue.jsunit-testingjestjsvue-jest

What is the process for refreshing the component content in Angular 2?

There was a moment during execution when my URL had the following appearance: http://localhost:4200/personal/51c50594-a95c-4a18-ac7b-b0521d67af96 I desire to visit a page with a different GUID and different content. http://localhost:4200/personal/{other ...

javascriptangularcomponentsangular2-routing

Switching carousel background image upon navigation click

I am currently working with a Bootstrap Carousel and I want to customize the background (an image) for each slide. I have 4 slides in total, each corresponding to a specific background image. <!DOCTYPE html> <html lang="en" dir="ltr ...

javascripthtmljquerycssbootstrap-4

Create a Vue application that is built on modules which could potentially be absent

I am currently developing a Vue+Vite app with module-based architecture. I have several Vue components and some parts of the app are functioning correctly. However, I want to ensure that the missing components are not imported or used in the application. H ...

javascriptvue.jsbuildmodulevite

Error: The attempt to access the 'useContext' property of null has failed due to a TypeError

Nowhere in my React code am I using the useContext property. There is a compiled webpack file in an npm package with a component inside. When trying to use this component in my React app, it throws an error: Uncaught TypeError: Cannot read properties of nu ...

javascriptreactjsnpmwebpackbabeljs

Ways to calculate the total order amount when the quantity is modified

The order entry form includes columns for product name, price, and quantity: <table id="order-products" class="mobileorder-table"> <colgroup> <col style="width: 80%;"> <col ...

javascripthtmlcssjavascript-objectsonblur

React, handling various router navigations

I have set up a BrowserRouter to serve /, /login, and /logout on my website. Once logged in, users can access an app with a consistent navbar on every page and dynamic content that holds data/functionality within the "Main" template component, which utiliz ...

javascriptreactjsreact-routerbrowser-history

Saving Arrays to a database using MVC and EF

Having trouble saving an array of tags passed from the view to the controller using Angular and JSON. Despite my efforts, vm.Name is showing up as null. Here's the script for the POST request: $http({ method: 'POST', url: '/RecipeTags ...

arraysjsonentity-frameworkasp.net-mvc-4

Issue with implementing autocomplete using AJAX and PHP for multiple input fields

HTML code: <table> <tr> <td align="center"> <label for="InputBox1"><b>~</b><font color="red">*</font>: &nbsp;</label> </td> </tr> <tr> <td align="center"> <div id="1"> ...

javascriptphpjqueryhtmlajax

Dealing with unique constraint violation in Mongodb when using insertMany

Currently, I'm in the process of working on a project that involves using node.js and mongodb version 5. In my collection, I have implemented a unique index for the Parcel property. However, during testing, an error is triggered: MongoBulkWriteError: ...

javascriptnode.jsmongodb

How can I create a JSON response in ServiceStack that includes only the primary key?

After creating a new record in my table, I want to generate a JSON response that includes only the primary ID of the newly created record. For example: {"PrimaryID": 123} Currently, I am using the following custom function: // Adds a new row to the P ...

c#jsonservicestack

What could be causing the repetition of the same cookie in my request header when using jQuery ajax?

Stuck in a dilemma for hours now, seeking assistance or suggestions from anyone who can help me out. To sum it up, I have an asp.net web api application where I am trying to fetch data from a web api and populate multiple dropdown lists on a page using jQ ...

javascriptjqueryajaxcookiesasp.net-web-api

Employing DOM manipulation within Vue unit tests as a last resort

What steps should I take to update my unit test in order to accurately validate the following scenario? Method: close(event) { const element = !!event?.target?.closest('#target') if (!element) { this.isVisible = false } }, Jest test: ...

javascriptvue.jsjestjsvue-jest

Locate the entries containing the minimum and maximum values in a column, then display several results

I am attempting to extract the "created-at" data based on the minimum and maximum values I retrieve. Below is a sample JSON structure: { "channel": { "id": "xxxxxxx", "field1": "A", "created_at": "2021-06-16T19:06:15+07:00", ...

phparraysjsonmaxmin