How can AngularJS ng-repeat be used to extract HTML elements?

I need help parsing HTML that is received from the server as a string. Here is an example of what I receive:

<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width="" height="" alt="Avatar Image" />

This HTML snippet comes in as part of an object property like so:

{admin: {avatar "<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class=" user-1-avatar avatar- photo" width="" height="" alt="Avatar Image" />"}
}

I have tried using ng-bind-html with no success. Can anyone suggest an alternative solution?

javascriptjsonangularjs

Answer №1

Newer updates for AngularJS:

function DisplayCtrl($scope, $sce) {
  $scope.data = {
  user: {
    picture : '<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class="user-1-picture picture-photo" width="" height="" alt="User Picture" />'
},
john: {
    picture : '<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class="user-1-picture picture-photo" width="" height="" alt="User Picture" />'
}};
  $scope.picture = $sce.trustAsHtml($scope.data.user.picture);
}

HTML:

  <div ng-bind-html="picture"></div>

Sample Demo : http://jsbin.com/butuwu/1/edit

Previous version :

HTML: 

<div ng-bind-html-unsafe="picture"></div>

JS:

function DisplayCtrl($scope) {
  var data = {
  user: {
    picture : '<img src="http://gravatar.com/avatar/9a52267d32ad2aaa4a8c2c45b83396e5?d=mm&amp;s=&amp;r=G" class="user-1-picture picture-photo" width="" height="" alt="User Picture" />'
}};
  $scope.picture = data.user.picture;
}

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

aggregate information from a JSON file

I need to display a product table based on supplier data from a JSON file. The final display should look like this: Supplier 1 Product 1 Product 2 Product 3 Supplier 2 Product 1 Product 2 Product 3 Here is the JSON data: { "data":{ &q ...

phpjsonapi

When using MySQL datetime in JPA, make sure to map it to Temporal.Type TIMESTAMP to retrieve only the date without the time in

Imagine this situation. In my JPA entity class, I have a field @Temporal(TemporalType.TIMESTAMP) @Column(name = "CREATED_DATE", length = 19) private Date createdDate = null; This field is mapped to a column CREATED_DATE with the dat ...

mysqljsondatetimejparesteasy

Using Kendo Grid to Transfer Data Between Grid Cells

Recently, I encountered a problem in my Kendo MVC project where I needed to drag a product code from one Kendo Grid to another when the cell value was empty. Here's the scenario: Grid A contains products ordered, but the vendor sending the list has i ...

javascriptjqueryasp.net-mvckendo-uikendo-grid

JavaScript sticky navigation bar - error displayed in console

Hey there, I'm having an issue with my Sticky-menu. I've been trying to troubleshoot it but keep getting these console error messages: 1. Cannot read property 'offsetTop' of null at HTMLDocument. 2. Cannot read property 'class ...

javascriptsticky

Able to retrieve parameters from the URL

I am currently working on my angularui project and facing an issue in the module where I am trying to retrieve a variable sent in the URL. Below is the module definition: angular.module("workPlan", ['damageEvent', &a ...

angularjsangular-ui-routerangular-uistate

How to Refresh EJS Template in an Express Node.js Application

Currently, I am integrating discord.js with express and facing a challenge. I want my webpage to automatically update whenever the client.on("message") event is triggered. According to my knowledge and research, it seems that rendering an ejs template is o ...

javascriptnode.jsexpressdiscord.jsejs

The issue of duplicate results appearing in the Wikipedia viewer persists even after conducting a second search

I have been working on a project to create a wiki viewer, but I've encountered an issue. Currently, I am utilizing the Wikipedia API. When a user enters a search query, they are presented with 5 possible articles (title and first sentence), and upon ...

javascriptjqueryapiwikipedia-api

Using Vue3 to set attributes on web components

I recently developed a self-contained web component using Vite and Vue3 to replace outdated jQuery libraries. When this component is rendered in HTML, it appears like this: <custom-datepicker id="deliveryTime"> #shadow-root <div> ...

javascriptvue.jsvuejs3web-component

How can you efficiently send JSON data from Ajax to a Servlet in a Java environment?

I am encountering a perplexing issue with sending data from my jQuery script to a servlet using AJAX. The strange part is that when I set the contentType to application/json, all values on the server side turn out to be null. However, if I remove it, the s ...

javajqueryjsonajaxservlets

I will evaluate two arrays of objects based on two distinct keys and then create a nested object that includes both parent and child elements

I'm currently facing an issue with comparing 2 arrays of objects and I couldn't find a suitable method in the lodash documentation. The challenge lies in comparing objects using different keys. private parentArray: {}[] = [ { Id: 1, Name: &ap ...

javascriptangularjstypescriptlodash

Unable to retrieve JSON information using AJAX

Trying to retrieve data from the server without refreshing the page using AJAX. The issue is that the data appears as text rather than in JSON format. Here is my code: $.ajax({ type: "GET", url: "http://localhost:8080/search?key=" + QUERY + "", ...

javascriptjqueryajaxjsonnode.js

How should one correctly trigger an event in Google scripts?

When it comes to calling in the active elements, I have been using event.source.getActive and SpreadsheetApp.getActive. However, I have noticed that I sometimes interchange them in my script and face issues. So, I am unsure about which method is more app ...

javascriptgoogle-apps-scriptdom-events

Troubleshooting: json_encode echoing issue in specific scenarios

I am currently encountering an issue while using PHP to display a JSON response on my webpage. The problem arises in certain instances, and I have been unable to identify the root cause. My SQL statement looks like this: "SELECT * FROM table ...

phpjson

The installed Bower component is not being referenced in the index.html file

I have successfully integrated lodash using bower into my angularjs application: bower install --save lodash The bower.json file has been updated with the necessary dependencies: { "name": "my-app", "version": "0.0.0", "dependencies": { "lodas ...

angularjsbowerlodash

Utilizing jQuery to create multiple interactive fields

I am working with a series of divs or inputs that are populated from a JSON file. For example, the structure looks like this: group - groupItem - itemSpec- itemSpec2 { "Group": "groupA", "Item": "groupA-item1", "Spec1": "item1-spec1", ...

jqueryjsonselectauto-populate

ng-repeat displaying an empty list

Currently, I am working on an AngularJS application where I am attempting to display data retrieved using the http get method from a RESTServer. The GET request is sent from one view and upon success, it navigates to another view within AngularJS. Both vi ...

javascriptangularjs

How can I ensure the keyboard does not cover the text input in React Native?

I am trying to figure out how to keep the keyboard from covering the text input field and instead have it appear below. Every time I type something, the keyboard obstructs my view of the text box content. Any help in solving this issue would be greatly a ...

javascriptreactjsreact-nativeflexboxkeyboard

Exploring the concepts of express post and delete responses that are unclear

It appears that I am facing an issue where trying to access an attribute of an element from a JSON file returns null. Additionally, I am still encountering npm audit problems. What are your thoughts on this situation? Below is the code snippet that has be ...

javascriptexpress

“What is the process of setting a referenced object to null?”

Here is an example of the code I'm working with: ngOnInit{ let p1 : Person = {}; console.log(p1); //Object { } this.setNull<Person>(p1); console.log(p1); //Object { } } private setNull<T>(obj : T){ obj = null; } My objective is to ...

javascriptangulartypescript

It seems like I'm having trouble sharing a collection of objects

Hey there, here's where I currently stand. I've got some code that sends an array of items to a .NET WebAPI (c#). var stuff = []; $('#items').find('input').each(function(){ var text = $(this).val(); stuff.push({ ID: ...

javascriptjqueryajaxcordovaasp.net-web-api