Display JSON information in a table using AngularJS

As I delve back into an old project, I've encountered a hurdle. My goal is to display some data in a table, but I seem to have forgotten the intricacies of working with JSON objects and Angular.

The API response I'm receiving looks something like this:

{"Search":[{"Title":"Not Another Teen Movie","Year":"2001","imdbID":"tt0277371","Type":"movie","Poster":"http://ia.media-imdb.com/images/M/MV5BODYyNTQyNzAzNF5BMl5BanBnXkFtZTgwNTA4ODYxMTE@._V1_SX300.jpg"},{"Title":"Not Just Another 8 Teen Movie","Year":"2003","imdbID":"tt0381457","Type":"movie","Poster":"N/A"},{"Title":"Not Just Another 8 Teen Movie 2","Year":"2003","imdbID":"tt0397579","Type":"movie","Poster":"N/A"},{"Title":"Not Just Another 8 Teen Movie 3","Year":"2004","imdbID":"tt0408045","Type":"movie","Poster":"N/A"}],"totalResults":"4","Response":"True"}

This is how I'm scoping the data:

$scope.AllMoviesFound = data;

My intention is to display all the different titles in a table:

<table class="table table-striped table-hover">
            <thead>
            <tr class="success">
                <th>
                        <h3>Title</h3></a>
                </th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="item in AllMoviesFound">
                <td><h4>{{item.Title}}</h4></td>
            </tr>
            </tbody>
        </table>

However, I'm struggling to make this setup function properly. Can someone point out what might be missing in my table?

javascriptangularjsjson

Answer №1

$scope.MoviesFromAPI = data.Search

Answer №2

If you want to extract information from a JSON response, there are a few ways to do it.

const data = '{"movies":[{"title":"Not Another Teen Movie","year":"2001","imdbID":"tt0277371","type":"movie","poster":"http://ia.media-imdb.com/images/M/MV5BODYyNTQyNzAzNF5BMl5BanBnXkFtZTgwNTA4ODYxMTE@._V1_SX300.jpg"},{"title":"Not Just Another 8 Teen Movie","year":"2003","imdbID":"tt0381457","type":"movie","poster":"N/A"},{"title":"Not Just Another 8 Teen Movie 2","year":"2003","imdbID":"tt0397579","type":"movie","poster":"N/A"},{"title":"Not Just Another 8 Teen Movie 3","year":"2004","imdbID":"tt0408045","type":"movie","poster":"N/A"}],"totalResults":"4","response":"True"}';
const jsonObject= JSON.parse(data);

//OR

 $(jQuery.parseJSON(JSON.stringify('your string')['search'])).each(function() {  
             var title = this.title;
            //do stuff
    });

Answer №3

Comparing $scope.AllMoviesFound = data; to having a candy bag and trying to eat the bag is like trying to work with movies data without accessing it properly.

Think of your movies data as being in a box labeled 'data'. To work on the movies, you need to take them out of the box first.

$scope.AllMoviesFound = data.Search

This code snippet indicates that you are extracting the 'Search' property from the data object and assigning it to your scope variable. Now you can loop through it.

It's important to note that ng-repeat only works with arrays and not objects.

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

JsonResult from MVC contains information, yet the browser is devoid of any data

In my controller method GetLayer2(), it bears a striking resemblance to GetLayer0() and GetLayer1() [HttpGet] public async Task<JsonResult> GetLayer2(string datePassedIn, string eventType, string driverId) { string orgCode = "HVO"; //User.Identi ...

c#jsonasp.net-mvcasp.net-core

Experiencing difficulties in transmitting images/files to API through reactjs and Material UI upload component

Recently, I tackled the task of creating an image upload component by utilizing an upload component from Material UI. While I have experience with this process using a simple HTML file input in the past, I found myself feeling a bit perplexed this time aro ...

javascriptnode.jsreactjsmaterial-uimulter

Retrieving JSON data using cURL with cookie results in the message: "Cookie value ÿÿ)»L"

I am currently attempting to extract the data from this particular JSON file: Below is the snippet of code I am using: $url = "http://steamcommunity.com/market/pricehistory/?country=DE&currency=3&appid=730&market_hash_name=Chroma%20Case"; $c ...

phpjsoncurlcookies

JavaScript's "for of" loop is not supported in IE 11, causing it to fail

Here is a piece of code I'm using to select and remove a d3.js node: if (d.children) { for (var child of d.children) { if (child == node) { d.children = _.without(d.children, child); update(root); ...

javascriptecmascript-6internet-explorer-11

Comparing obj.hasOwnProperty(key) with directly accessing obj[key]

Consider the scenario where I need to determine if a property exists within an Object. A comparison between two methods caught my attention: if(object.hasOwnProperty(key)) { /* perform this action */ } OR if(object[key]) { /* perform this action */ ...

javascriptjson

What materials are required in order to receive messages and information through my Contact page?

Currently, I am pondering the optimal method for gathering information from my Contact page. I have already created a form; however, I'm unsure how to send the gathered data to myself since I am relatively new to Web development. Angular is the framew ...

javascripthtmlangulartypescript

Transforming a map into JSON with Playframework

How do I convert a map (defined in a scala template file) with the following structure: <Integer, Map<Integer, Double>>, to a JSON string? I have attempted to use the following code snippet: @Json.stringify(Json.toJson(moduleId2DecileMap)) H ...

jsonplayframework

Change the size of a particular div upon hovering over another element

I'm trying to figure out how to scale my div with text when a user hovers over a button, but I've tried various operators like >, ~, +, - with no success. section { background: #000; color:#fff; height: 1000px; padding: 150px 0; font-family: R ...

javascriptjqueryhtmlcss

Retrieve an image located outside of a container

I have multiple SVGs inside separate div elements. <div id="divA"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <rect x="10" y="10" height="130" width="500" style="fill: #000000"/> ...

javascriptjqueryhtmlsvg

What is the best way to reset a dropdown list value in angular?

Is there a way to erase the selected value from an Angular dropdown list using either an x button or a clear button? Thank you. Code <div fxFlex fxLayout="row" formGroupName="people"> <mat-form-field appearance=&quo ...

javascriptangularjsangulartypescript

Confused about the meaning of the Unknown Provider: $attrsProvider <- $attrs?

While executing my Karma Unit Tests, I've encountered the following error: Error: [$injector:unpr] Unknown provider: $attrsProvider <- $attrs http://errors.angularjs.org/1.2.16/$injector/unpr?p0=%24attrsProvider%20%3C-%20%24attrs at /h ...

angularjskarma-runnerangular-ui-bootstrapkarma-jasmine

The event.pageY position consistently reflects the laptop screen size rather than the exact position where the click occurred

My webpage is scrollable, but the event.pageY position always corresponds to my screen size. Even when scrolling down and clicking near the top of the screen, it registers as 50px. I am currently utilizing event.pageY While this functions correctly on a ...

javascriptjqueryhtmlcss

React Native: Picker value remains static

I'm encountering an issue where the value of the picker does not change when I select a new value from it. This problem started occurring after I added the onValueChange function. If anyone has any insights or suggestions on how to resolve this, I wou ...

javascriptreactjstypescriptreact-native

What is the best way to define a constant in the main scope that relies on a function parameter?

I'm currently exploring next-auth and I'm interested in leveraging unstable_getserversession. According to the documentation, I need to import options from another file. import { authOptions } from 'pages/api/auth/[...nextauth]' Howeve ...

javascriptnext.jsnext-auth

The onblur event is triggering prior to the value being updated

There are two input fields within a <form> element. I am trying to retrieve the value of one input field (dpFin) once it has been changed. The issue is that when I attempt to get the new value inside the event using var endDt = document.getElementByI ...

javascripthtml

Issue with nivo-lightbox not opening upon clicking image

I have diligently followed the instructions to set up this JavaScript plugin, but unfortunately it doesn't seem to be functioning properly. The plugin I'm using can be found here: All the links to the CSS, theme, and JavaScript files are display ...

javascriptcsslightboxnivo-slider

Unable to declare a string enum in TypeScript because string is not compatible

enum Animal { animal1 = 'animal1', animal2 = 'animal2', animal3 = 'animal3', animal4 = 'animal4', animal5 = 'animal5' } const species: Animal = 'animal' + num Why does typescr ...

javascripttypescript

Update a specific form data field within an Angular application

I recently encountered a situation where I had an angular form with 9 fields and submitted it to the server using a post request. However, I realized that I had only filled in values for 8 fields while leaving one as null. Now, in a new component, I am w ...

javascriptangulartypescriptformsput

Accordion checkbox with dynamic features

Currently, I am dynamically populating data into a jQuery accordion. My goal is to include a checkbox just before the <h2> text. <div id="checkbox"> <h2> <span> <input type="checkbox" class="mycheck" value="apple" / ...

javascriptjqueryhtmljquery-ui

navigate back to the previous tab using protractor

When I open a new tab (second), I attempt to switch back to the first tab. common.clickOpenNewSession(); //opens a new tab browser.getAllWindowHandles().then(function (handles) { var secondWindowHandle = handles[1]; var firstWindowHandle ...

javascriptangularjsselenium-webdriverprotractor