Eendimensionale array van strings die worden geparseerd naar 2d door een hoekhulpmiddel

Het volgende JSON-antwoord van de server

[
    "hello",
    "world"
]

wordt geparseerd in een 2D-array door deze ngResource-service

myService.factory('Name', function($resource){
    return $resource(site_url+'api/accounts/:accountId/names/', {}, {
        list: {method:'GET', params:{}, isArray:true}
    });
});

zo genoemd

$scope.names = Name.list({accountId:$scope.account.id}, function(e){
    console.log(e);
});

sporen naar

[{"0":"h","1":"e","2":"l","3":"l","4":"o"},{"0":"w","1":"o","2":"r","3":"l","4":"d"}]

Heeft u hints?


Antwoord 1, autoriteit 100%

TLDR; ngResourceverwacht een object of een reeks objectenin uw antwoord.


Als isArrayis ingesteld op truein de lijst met acties, herhaalt de module ngResourceelk item dat in het antwoord is ontvangen en creëert een nieuwe instantie van een resource. Om dit te doen, voert Angular een diepe kopie uit tussen het ontvangen item en de klasse Resource, wat ons een object geeft met speciale methoden ($save, $deleteenzovoort)

Bekijk de bron hier.

Intern hoekig gebruikt hoekig.copyom de deep copy en deze functie werkt alleen met objectenen arrays, als we een string doorgeven, wordt deze als een object behandeld.

Strings in JS kunnen zich gedragen als arrays door sequentiële toegang tot elk teken te geven. angular.copyzal het volgende produceren wanneer een string wordt doorgegeven

angular.copy('hi',{})   => {0:'h', 1:'i'}

Elk teken wordt een waarde in een object, met de index als sleutel. ngResourcelevert een bron met eigenschappen 0en 1.


Uw keuzes zijn:

Gebruik de $http-service op een lager niveau

$http.get('/res').success(function(data){
  $scope.test = data;
});

Retourneer een reeks objecten in uw json-antwoord

[{'data': "hello"}, {'data': "world"}] 

Onderschep de reactie en wijzig uw gegevens

Als u de gegevens die de server terugstuurt niet kunt wijzigen en u ngResourcewilt gebruiken, moet u het antwoord transformeren. Lees hier

hoe u dit doet


Antwoord 2

Ik heb hier ook last van. Hier is mijn oplossing door de service iets aan te passen met behulp van query

var app = angular.module('testApp', ['ngResource']);
app.factory('Name', function($resource, $sce) {
  var path = "test.json";
  return $resource(path, {}, {
    query: {
      method: 'GET',
      isArray: false
    }
  })
});
app.controller('testController', function($scope, Name) {
  $scope.result;
  $scope.getResult = function() {
    Name.query(function(data) {
      $scope.result = data;
    });
  };
  $scope.getResult();
});

HTML:

<!DOCTYPE html>
<html ng-app="testApp">
<head>
  <link href="style.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-resource.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-controller="testController">
  <h1>{{result.surname}}</h1>
</body>
</html>

en het JSON-bestand:

{
    "name": "Homer",
    "surname":  "Simpson",
    "Town": "Springfield"
}

en ook werkende Plunker als je geïnteresseerd bent: http://plnkr.co/edit/SwqlZyqZ4zfcpaLxaf39

Ik hoop dat dit iemand helpt …

Other episodes