Bagaimana cara memuat json ke angular.js ng-model saya?

Saya memiliki apa yang menurut saya mungkin merupakan pertanyaan yang sangat jelas, tetapi saya tidak dapat menemukan jawaban di mana pun.

Saya hanya mencoba memuat beberapa data JSON dari server saya ke klien. Sekarang, saya menggunakan JQuery untuk memuatnya dengan panggilan AJAX (kode di bawah).

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

Ini terletak di file html. Sejauh ini berhasil, tetapi masalahnya adalah saya ingin menggunakan AngularJS. Sekarang, sementara Angular BISA menggunakan variabel, saya tidak dapat memuat semuanya ke dalam variabel sehingga saya dapat menggunakan a untuk setiap loop. Ini sepertinya terkait dengan "$ Scope", yang biasanya terletak di file .js.

Masalahnya adalah saya tidak dapat memuat kode dari halaman lain ke dalam file .js. Setiap contoh Angular hanya menampilkan hal-hal seperti ini:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

Jadi, ini berguna, jika IA) Ingin mengetik semua ini dengan tangan, DAN B) Jika saya tahu sebelumnya apa semua data saya ...

Saya tidak tahu sebelumnya (datanya dinamis) dan saya tidak ingin mengetiknya.

Jadi, ketika saya mencoba mengubah panggilan AJAX ke Angular menggunakan $ Resource, sepertinya tidak berhasil. Mungkin saya tidak bisa mengetahuinya, tetapi ini adalah permintaan GET yang relatif sederhana untuk data JSON.

tl: dr Saya tidak bisa mendapatkan panggilan AJAX untuk bekerja untuk memuat data eksternal ke dalam model sudut.

Seperti yang disebutkan Kris, Anda dapat menggunakan $resourcelayanan untuk berinteraksi dengan server, tetapi saya mendapat kesan bahwa Anda memulai perjalanan Anda dengan Angular - Saya ada di sana minggu lalu - jadi saya sarankan untuk mulai bereksperimen langsung dengan $httplayanan tersebut. Dalam hal ini Anda dapat memanggil getmetodenya.

Jika Anda memiliki JSON berikut

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

Anda dapat memuatnya seperti ini

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

The getMetode mengembalikan janji objek yang argumen pertama adalah sukses callback dan yang kedua merupakan kesalahan callback.

Saat Anda menambahkan $httpsebagai parameter fungsi, Angular melakukannya secara ajaib dan menyuntikkan $httpsumber daya ke pengontrol Anda.

Saya telah memberikan beberapa contoh di sini

• http://plnkr.co/edit/Wuc6M7?p=preview
• https://gist.github.com/3938567

Berikut adalah contoh sederhana tentang cara memuat data JSON ke dalam model Angular.

Saya memiliki layanan web JSON 'GET' yang mengembalikan daftar detail Pelanggan, dari salinan online database Microsoft SQL Server Northwind .

http://www.iNorthwind.com/Service1.svc/getAllCustomers

Ini mengembalikan beberapa data JSON yang terlihat seperti ini:

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..dan saya ingin mengisi daftar drop-down dengan data ini, agar terlihat seperti ini ...

Saya ingin teks setiap item berasal dari kolom "CompanyName", dan ID berasal dari kolom "ID Pelanggan".

Bagaimana saya melakukannya?

Pengontrol Angular saya akan terlihat seperti ini:

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

... yang mengisi variabel "listOfCustomers" dengan kumpulan data JSON ini.

Kemudian, di halaman HTML saya, saya akan menggunakan ini:

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

Dan itu dia. Kami sekarang dapat melihat daftar data JSON kami di halaman web, siap digunakan.

Kuncinya ada di tag "ng-options":

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

Ini sintaks yang aneh untuk dipahami!

Saat pengguna memilih item dalam daftar ini, variabel "$ scope.selectedCustomer" akan disetel ke ID (bidang ID Pelanggan) dari rekaman Pelanggan itu.

Skrip lengkap untuk contoh ini dapat ditemukan di sini:

Data JSON dengan Angular

Mike

Saya menggunakan kode berikut, ditemukan di suatu tempat di internet meskipun tidak ingat sumbernya.

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);