কীভাবে আমার কৌনিক.জ এস এনজি-মডেলটিতে জসন লোড করবেন?

Question

আমার মনে হয় আমার কাছে সম্ভবত খুব সুস্পষ্ট প্রশ্ন, তবে আমি কোথাও উত্তর খুঁজে পাইনি।

আমি আমার সার্ভার থেকে ক্লায়েন্টে কিছু জেএসএন ডেটা লোড করার চেষ্টা করছি। এই মুহুর্তে, আমি এজেএক্স কল (নীচের কোড) দিয়ে এটি লোড করতে JQuery ব্যবহার করছি।

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

এটি এইচটিএমএল ফাইলে অবস্থিত। এটি এখন পর্যন্ত কাজ করে, তবে বিষয়টি হ'ল আমি AngularJS ব্যবহার করতে চাই। এখন, কৌণিক CAN ভেরিয়েবলগুলি ব্যবহার করার সময়, আমি পুরো জিনিসটি একটি ভেরিয়েবলের মধ্যে লোড করতে পারি না যাতে আমি প্রতিটি লুপের জন্য একটি ব্যবহার করতে পারি। এটি "ope স্কোপ" এর সাথে সম্পর্কিত বলে মনে হচ্ছে, যা সাধারণত .js ফাইলে থাকে।

সমস্যাটি হ'ল আমি অন্য পৃষ্ঠাগুলি থেকে .js ফাইলে কোড লোড করতে পারি না। কৌনিক প্রতিটি উদাহরণ কেবল এই জাতীয় জিনিস দেখায়:

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

সুতরাং, এটি দরকারী, যদি আইএ) হাতের মাধ্যমে এগুলি সব টাইপ করতে চান, এবং বি) আমার যদি ডেটা আগে থেকে জানা থাকে ...

আমি আগাম জানি না (ডেটা গতিশীল) এবং আমি এটি টাইপ করতে চাই না।

সুতরাং, যখন আমি $ রিসোর্স ব্যবহার করে অ্যাজাক্স কলটি অ্যাঙ্গুলারে পরিবর্তিত করার চেষ্টা করেছি তখন মনে হয় এটি কার্যকর হবে না। হয়তো আমি এটি বুঝতে পারি না, তবে এটি JSON ডেটার জন্য তুলনামূলকভাবে সহজ জিইটি অনুরোধ।

tl: dr কৌণিক মডেলটিতে বাহ্যিক ডেটা লোড করার জন্য আমি কাজ করতে AJAX কল পেতে পারি না।

Comments

আমরা কি ource রিসোর্স ব্যবহার করার চেষ্টা করতে পারি? এটি কাজ করা উচিত, তাই সম্ভবত এটি সবচেয়ে সহজ যদি আমরা আপনাকে এটির ডিবাগ করতে সহায়তা করি ...

— ক্রিস জেনকিনস

Answer 1

ক্রিস যেমন উল্লেখ করেছেন, আপনি $resourceসার্ভারের সাথে ইন্টারঅ্যাক্ট করার জন্য পরিষেবাটি ব্যবহার করতে পারেন তবে আমি যে ধারণাটি পেয়েছি আপনি কৌণিক দিয়ে আপনার যাত্রা শুরু করছেন - আমি গত সপ্তাহে সেখানে ছিলাম - তাই আমি সরাসরি $httpপরিষেবাটি নিয়ে পরীক্ষা শুরু করার পরামর্শ দিই । এক্ষেত্রে আপনি এর getপদ্ধতিটি কল করতে পারেন ।

আপনার যদি নিম্নলিখিত JSON থাকে

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

আপনি এটি এভাবে লোড করতে পারেন

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

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

getপদ্ধতি ফেরৎ প্রতিশ্রুতি বস্তুর প্রথম যুক্তি হল সাফল্য কলব্যাক এবং দ্বিতীয় একটি ত্রুটি কলব্যাক।

যখন আপনি $httpকোনও ফাংশনের প্যারামিটার হিসাবে যুক্ত করেন কৌণিক এটি যাদু করে এবং $httpআপনার নিয়ামকের মধ্যে সংস্থানটি সংক্রামিত করে ।

আমি এখানে কিছু উদাহরণ রেখেছি

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

Comments

অনেক অনেক ধন্যবাদ, পরিবর্তে আমি $ HTTP পরিষেবাটি ব্যবহার করে শেষ করেছি ... কিছুটা ভিন্ন উপায়ে ... code$ http.get ('/ json')। সাফল্য (ফাংশন (প্রতিক্রিয়া) {$ স্কোপ.রেপোর্টস = প্রতিক্রিয়া; getData (); code আমার কাছে কী আকর্ষণীয়, প্রতিশ্রুতিবদ্ধ বিষয়টি ... আমি সত্যই সে সম্পর্কে আরও জানতে চাই it আমি এটির ধারণাটি পছন্দ করি The অন্য সমস্যাটি যা আমি করছি তা মূলত এজাক্স অনুরোধটিতে লুপ চালাচ্ছে তাই আমি ক্রমাগত "স্বয়ংক্রিয়ভাবে" পৃষ্ঠাটি রিফ্রেশ করতে পারি $ সময়সীমা আমার পক্ষে কাজ করে না

— এমজেআর_আইআইআই

আমি বিশ্বাস করি এটি হওয়া উচিত $ স্কোপ.টিডোস = রেজ; পরিবর্তে res.data।

— অ্যানয়েজ

প্রতিক্রিয়া বস্তু চার বৈশিষ্ট্য আছে: config, data, headersএবং status। dataসম্পত্তির মানগুলি যা চান তা।

— jaime

একটি $ সুযোগ.todos = []] থাকার মূল্য; HTTP অনুরোধের আগে, যাতে আপনার কমপক্ষে একটি ডিফল্ট খালি কাঠামো থাকে যাতে আপনার টেমপ্লেটে ত্রুটি না ফেলে।

— এস ..

Re: $scope.todos = res;বা $scope.todos = res.data;- পার্থক্য কিনা আপনি একটি আছে .then(response)বা এ দেওয়া হয় যখন সমগ্র দেওয়া হয় । .success(result).successresponse.data.thenresponse

— জেসি চিশলম

Answer 2

কীভাবে একটি কৌণিক মডেলটিতে JSON ডেটা লোড করবেন তার একটি সাধারণ উদাহরণ।

আমার কাছে একটি জেএসএন 'জিইটি' ওয়েব পরিষেবা রয়েছে যা মাইক্রোসফ্টের নর্থওয়াইন্ড এসকিউএল সার্ভার ডাটাবেসের একটি অনুলিপি থেকে গ্রাহকের বিশদগুলির একটি তালিকা ফেরত দেয় ।

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

এটি কিছু জেএসএন ডেটা প্রত্যাবর্তন করে যা দেখে মনে হচ্ছে:

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

.. এবং আমি এই ডেটা দিয়ে একটি ড্রপ ডাউন তালিকাটি তৈরি করতে চাই, এটি দেখতে দেখতে ...

আমি প্রতিটি আইটেমের পাঠ্যটি "CompanyName" ক্ষেত্র থেকে আসা এবং আইডিটি "গ্রাহকআইডি" ক্ষেত্র থেকে আসা উচিত।

আমি এটা কিভাবে করব?

আমার কৌণিক নিয়ামকটি দেখতে এই রকম হবে:

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
         });
}

... যা এই সংস্থার JSON ডেটার সাথে "listOfCustomers" ভেরিয়েবল পূরণ করে।

তারপরে, আমার এইচটিএমএল পৃষ্ঠায়, আমি এটি ব্যবহার করব:

<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>

এবং এটাই. আমরা এখন একটি ওয়েব পৃষ্ঠায় আমাদের JSON ডেটার একটি তালিকা দেখতে পাচ্ছি, এটি ব্যবহারের জন্য প্রস্তুত।

এর মূল চাবিকাঠি "এনজি-বিকল্পসমূহ" ট্যাগে রয়েছে:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

মাথা ঘুরতে অবাক করা সিনট্যাক্স!

যখন ব্যবহারকারী এই তালিকায় কোনও আইটেম নির্বাচন করেন, "গ্রাহক। নির্বাচিত কাস্টমার" ভেরিয়েবলটি সেই গ্রাহকের রেকর্ডের আইডি (গ্রাহকআইডি ক্ষেত্র) এ সেট করা হবে।

এই উদাহরণের জন্য সম্পূর্ণ স্ক্রিপ্ট এখানে পাওয়া যাবে:

কৌনিক সহ JSON ডেটা

মাইক

Comments

এটি কি আসলে কাজ করে? আপনার JSON অবৈধ (কীগুলি উদ্ধৃতি চিহ্নগুলিতে নেই)। আপনি ত্রুটি পেতে না?

— কোডিবাগস্টিন

দুঃখিত, আপনি ঠিক বলেছেন। আমি উপরের স্ক্রিনশটটি গুগল ক্রোম থেকে দুর্দান্ত জেএসএনভিউ অ্যাড ইন ইনস্টলড দিয়ে নিয়েছি (যাতে আপনি জেএসএনকে একটি সুন্দর বিন্যাসিত উপায়ে দেখতে পারেন)। তবে হ্যাঁ, আমার ওয়েব পরিষেবা থেকে জেএসএন বৈধ। আপনি যদি আমার নিবন্ধের লিঙ্কটিতে ক্লিক করেন তবে আপনি এই কোডটির একটি লাইভ সংস্করণ দেখতে পারেন।

— মাইক গ্লেডহিল

এটা কি কাজ করে? আমি মনে করি এটি ডেটা হওয়া উচিত Gঅনলাইন

— গ্রাহকরা

উফফ, আপনি একেবারে ঠিক বলেছেন। "GetAllCustomersResult" এ JSON ফলাফল মোড়ানোর জন্য আমি ওয়েব পরিষেবা পরিবর্তন করেছিলাম, সুতরাং হ্যাঁ, এটি প্রয়োজন। আমি কোড নমুনা আপডেট করেছি। সতর্ক থাকুন জন্য ধন্যবাদ.

— মাইক গ্লেডহিল

Answer 3

আমি নিম্নলিখিত কোড ব্যবহার করি, ইন্টারনেটে কোথাও পাওয়া যায় তবে উত্সটি মনে নেই।

    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);