Convert json over til den bliver vist alm

Tags: angularjs

Bruger #17136 @ 27.07.16 00:04

Hej Udvikleren.

Lige nu får jeg kun ren JSON indhold tilbage, men jeg vil gerne ha det vist frem i de områder som jeg har angivet det på mit cshtml side. Ja jeg arbejder med MVC(C#)

Lige nu bliver det kun vist som JSON indhold.

Formålet:
det er at det json indhold som er bliver vist som at det var html i sig selv. Hvis man kan forklare det på den måde.

Problemet lige nu:
Det er at den kun viser ren JSON, men kun godt tænke mig at det indhold som er i JSON bliver convert til html sådan at det bliver vist pænt på siden.

Jeg har opbygget Loadnews.js i angularjs 1.5.

Lidt ligesom sådan her:
Se billedet hvordan det ser ud normalt.

Det er sådan jeg tænker at jeg vil ha det frem til.

Cshtml - View

HTML kode

 <div class="col-md-12" ng-app="NewsLoad" ng-controller="ListNews">
     <ul class="team-list sort-destination">
         <li class="col-md-4 col-sm-6 col-xs-12 isotope-item leadership" ng-repeat="New in Newslist | limitTo: totalDisplayed" style="max-height:380px; float:left;">
             <span class="thumb-info thumb-info-hide-wrapper-bg mb-xlg">
                 <span class="thumb-info-wrapper">
                     <a href="~/Nyhed/{{New.Url}}/{{New.Id}}">
                     <img class="img-responsive" src="~/img/nyhederimg/{{New.Img}}" style="width:100%; min-height:244px; max-height:244px;" alt="{{New.Title}}">
                         <span class="thumb-info-title">
                             <span class="thumb-info-inner">{{New.Title}}</span>
                         </span>
                     </a>
                 </span>
             </span>
         </li>
     </ul>
 
     <div class="form-group col-md-12" style="margin-top:23px;">
         <button class="btn-block btn btn-danger" ng-click="change()">Hent mere</button>
     </div>
 </div>

Loadnews.Js

JScript kode

 var app = angular.module('NewsLoad', []);
 app.controller('ListNews', function ($scope, $http) {
     
     $scope.Display = 9;
 
     $scope.change = function () {
         $scope.Display += 6;
     }
 
     $scope.Newslist = [];
 
     $http.get('../Nyheder').
     success(function(data) {
         $scope.Newslist = data.Newslist;
     });
 })

Jeg har kigge på f.eks
How to render a HTML tag from json value using angularJs

Det er som sagt bare alm tekst indhold. Der er intet h1 tags, p eller ligne.

Håber du/i kan hjælpe mig videre?

EIDT:

Jeg tilføjer lige min controller (JSONResult)

CSharp kode

 public JsonResult Index()
         {
             NyhedPage model = new NyhedPage();
 
             List<NewListAngularjs> list = HelperToTables.NewContent.NewListDescendingSelect();
 
 
             return Json(list, JsonRequestBehavior.AllowGet);
         }

Model newlistangularjs

CSharp kode

 public class NewListAngularjs
     {
         public string Title { get; set; }
         public int Id { get; set; }
         public string Url { get; set; }
         public string Img { get; set; }
     }

Indlæg senest redigeret d. 27.07.2016 14:02 af Bruger #17136

3 svar postet i denne tråd vises herunder
1 indlæg har modtaget i alt 6 karma

Sorter efter stemmer Sorter efter dato

Bruger #6559 @ 27.07.16 17:22

843

Hej Jesper,

AngularJS plejer ikke have nogle problemer med at binde fra et http kald til json. Hvis din service returnere json data, så den controller som du har lavet, ser rigtigt nok ud.

Jeg ville lige bruge Chrome developer tool eller Firebug i Firefox til at se hvordan det data du får tilbage ser ud.

Det skal være sådan at du i Chrome Developer tool kan se det i den JSON og navigere rundt i den.

Edit: Som sidenote, du bør bruge direktiverne ngSrc og ngHref, når du laver bindings på dine href/src, og .success på http bliver depricated i senere udgaver. Kig på then() i stedet for

Indlæg senest redigeret d. 27.07.2016 17:26 af Bruger #6559

Bruger #17136 @ 27.07.16 17:58

Hej Jesper,

AngularJS plejer ikke have nogle problemer med at binde fra et http kald til json. Hvis din service returnere json data, så den controller som du har lavet, ser rigtigt nok ud.

Jeg ville lige bruge Chrome developer tool eller Firebug i Firefox til at se hvordan det data du får tilbage ser ud.

Det skal være sådan at du i Chrome Developer tool kan se det i den JSON og navigere rundt i den.

Edit: Som sidenote, du bør bruge direktiverne ngSrc og ngHref, når du laver bindings på dine href/src, og .success på http bliver depricated i senere udgaver. Kig på then() i stedet for

Jeg får det hele rigtigt data, men det er bare sådan at det ikke bliver vist som jeg ønsker det i min view side.

Ligesom det billede som jeg fik tilføjet tidligere. men nu får jeg kun "ren" json indhold ud.

LIge nu ser min controller sådan her ud:

CSharp kode

 public ActionResult index()
         {
             //Så kalde på indexjson? - Det bliver så ikke vist her som jeg ønsker.
 
             var AddView = indexjson();
             return View(AddView);
         }
         public JsonResult indexjson()
         {
             NyhedPage model = new NyhedPage();
 
             List<NewListAngularjs> list = HelperToTables.NewContent.NewListDescendingSelect();
 
 
             return Json(list, JsonRequestBehavior.AllowGet);
         }

Det er lidt som her jeg prøver at lave.

Indlæg senest redigeret d. 27.07.2016 18:01 af Bruger #17136

Bruger #6559 @ 27.07.16 18:05

843

Hej Jesper,

AngularJS plejer ikke have nogle problemer med at binde fra et http kald til json. Hvis din service returnere json data, så den controller som du har lavet, ser rigtigt nok ud.

Jeg ville lige bruge Chrome developer tool eller Firebug i Firefox til at se hvordan det data du får tilbage ser ud.

Det skal være sådan at du i Chrome Developer tool kan se det i den JSON og navigere rundt i den.

Edit: Som sidenote, du bør bruge direktiverne ngSrc og ngHref, når du laver bindings på dine href/src, og .success på http bliver depricated i senere udgaver. Kig på then() i stedet for

Jeg får det hele rigtigt data, men det er bare sådan at det ikke bliver vist som jeg ønsker det i min view side.

Ligesom det billede som jeg fik tilføjet tidligere. men nu får jeg kun "ren" json indhold ud.

LIge nu ser min controller sådan her ud:

CSharp kode
 public ActionResult index()
         {
             //Så kalde på indexjson? - Det bliver så ikke vist her som jeg ønsker.
 
             var AddView = indexjson();
             return View(AddView);
         }
         public JsonResult indexjson()
         {
             NyhedPage model = new NyhedPage();
 
             List<NewListAngularjs> list = HelperToTables.NewContent.NewListDescendingSelect();
 
 
             return Json(list, JsonRequestBehavior.AllowGet);
         }
Det er lidt som her jeg prøver at lave.

Har du det kørende et sted, så jeg kan teste det? Det er lidt nemmere, da det umiddelbart ser rigtigt ud det du har lavet.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler