Exploring nested JSON values with Angular

Check out this data I have:

{
  "statusCode": 200,
  "result": {
    "items": [
      {
        "Name": "date",
        "Fields": {
          "{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
            "Name": "Promo Content",
            "Value": "September 22, 2015"
          }
        }
      },
      {
        "Name": "rate",
        "Fields": {
          "{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
            "Name": "Promo Content",
            "Value": "10%"
          }
        }
      },
      {
        "Name": "description",
        "Fields": {
          "{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}": {
            "Name": "Promo Content",
            "Value": "This rate remains valid as of the date mentioned above."
          }
        }
      }
    ]
  }
}

In addition to that, here's my HTML and JS code:

<body ng-app="myApp">

<div ng-controller="CallWebApi">
    <ul>
        <li ng-repeat="item in data">
            {{ item.Name }}: {{ item.Fields.['{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}'].Value }}
        </li>
    </ul>
</div>
<script>
angular.module('myApp',[]).controller('CallWebApi', function($scope,$http) {
    
    $http.get('./test.js').
        success(function (response) {
            $scope.data = response.result.items;
            console.log('success ' + response)
        })
        .error(function(response) {
            console.log('failure ' + response)
        });
});
</script>
</body>

I am wondering, how can I display the Value within the Fields object?

I anticipate seeing:

  • date: September 22, 2015
  • rate: 10%
  • description: This rate remains valid as of the date mentioned above.

Answer №1

<ul>
  <li ng-repeat="element in data">
    {{ element.Title }}: {{ element.Attributes["{3C3170EE-E6D5-4075-A864-8AB86D1E8E98}"].Content }}
  </li>
</ul>

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

Ajax fails to function within a loop

I'm looking to implement Ajax in a loop to retrieve data sequentially. This is what I have in my JavaScript function: var resultType = $("input[name='resultType']:checked").val(); var finalResult = ""; var loadingMessage = "<img src=&ap ...

Retrieving device information through JavaScript, jQuery, or PHP

Looking to build a website that can identify the device name and model of visitors accessing the page from their devices. ...

When it comes to selecting a build tool for creating JavaScript projects, which is more efficient: rake, make, ant, or maven?

As a beginner in creating tools for JavaScript and utilizing Node.js, I am faced with numerous options for building these tools. However, I find myself confused about which one would be the best choice for developing building tools. Can you please provid ...

When route parameters are present in my url, Angular redirects hash links

When I have a single level route, the hash links function correctly without rerouting. However, when dealing with URLs like country/kh and attempting to use hash tags such as country/kh#projects, the page ends up rerouting, which can be quite irritating. ...

Can the typeof operator constantly display the changing data types assigned to a single variable?

Recently, I have been experimenting with the typeof operator in relation to the variables I am defining. In my Chrome developer console, I tried a statement that declared several variables like this: var x, y, z; Then, I proceeded to assign values to eac ...

What is the process for adding an item to an object?

I currently have the following data in my state: fbPages:{'123':'Teste','142':'Teste2'} However, I am in need of a dynamic solution like the one below: async getFbPages(){ var fbPages = {} awa ...

React Transition Group failing to apply CSS classes

I am utilizing React Transition Group to apply animations with different timeouts to each item. However, the issue arises when my links do not receive any classes. Despite this, wrapping the ScrollLinks tag with TransitionGroup allows the animation to func ...

Rails Strong Parameters failing to acknowledge parameters received via AJAX Post request

Hey there! I'm currently working on sending some parameters from the frontend to my backend Rails controller, where I have set up strong params. The Ajax call I'm using is as follows: $("#send").click(function() { var message = $("#messag ...

Text that disappears upon clicking on show/hide按钮

Could someone please help me figure out how to prevent the "See more" text from disappearing when clicked in the example below? I want it to stay visible. Thank you! ...

What is the best way to utilize an HTML form for updating a database entry using the "patch" method?

I have been attempting to update documents in my mongoDB database using JavaScript. I understand that forms typically only support post/get methods, which has limitations. Therefore, I am looking for an alternative method to successfully update the documen ...

Warning message appears if date input field is left empty upon submission

After implementing angular-ui/ui-date for the date input and angular-auto-validate for form validation, I encountered an issue where the date input field shows a required message before submission. It seems that the problem may be caused by the built-in va ...

I am eager to retrieve the outcome once all the queries have been completed within the loop (using express.js, react.js, and MySQL)

Currently, I am engaged in a personal project that involves using React and Express. The task at hand is to retrieve data spanning 7 days for a specific item from my database and present it in a search list. To achieve this, I attempted the following: U ...

Working with JSON data in Java and displaying it in a user interface

As a newcomer to JAVA, I find myself facing JSON data for the first time. My task is to develop a news desktop application by sending a GET request to a web address that returns JSON output, as illustrated below. ****JSON OUTPUT**** { "status": ...

Using ReactJS to search for and replace strings within an array

A feature of my tool enables users to input a string into a textfield and then checks if any words in the input match with a predetermined array. If the user's string contains a specific name from the array, I aim to replace it with a hyperlink. I&a ...

Is it possible to achieve a smooth transition to the right using CSS

I'm attempting to create a sliding box effect from left to right using only transitions, similar to this: #box { width: 150px; height: 150px; background: red; position:absolute; transition: all 2s ease-out; right:auto; } .active{ bac ...

Experience the beauty of having multiple Three.js CSS3D scenes displayed on a single HTML page with the captivating molecules

After studying a remarkable example by Mr. Doob found at http://threejs.org/examples/css3d_molecules.html, my goal is to develop a webpage presenting TWO 3D chemical structures side by side: I am facing challenges with the structure on the right half. Bot ...

Challenges with arrays that occur asynchronously

At the end of this code snippet where console.log(authors) is called, I noticed that the array seems to be constantly overwriting itself. Typically, in a loop like this, the async part should be outside the loop. To solve the issue of getting an array full ...

"Utilizing the power of MVC Modelbinding with the seamless integration

I am currently facing an issue with my Modelbinding and struggling to understand why it is not working. Here is the Controller snippet: public class ItemListController : Microsoft.AspNetCore.Mvc.Controller { [HttpPost] public async Task<IA ...

Transmitting data via HTML anchor tags

Is it possible to send POST data using an HTML tag? I'm aware that scripting is usually required, but I've been attempting to achieve this without success. <a class="test" onClick="assign()"><img src='<?php echo $accounts[$i][&a ...

Tips for toggling the visibility of a website section and updating the image with JavaScript

UPDATE #1 A big thank you to the two helpful users who provided solutions that worked perfectly! In my original post, I forgot to ask if there is a way to adjust the user's view so that when they collapse the expanded section, their "view" on the web ...