javascript - 如何在 Angular JS 中使用 $Routeparams 从 json 文件检索数据

标签 javascript jquery angularjs json

enter image description here

我在使用 $routeparams 检索数据时遇到问题,我将描述我的问题

/检索要重定向的 URL/

  console.log($routeParams);
  console.log($routeParams.json_url);

    $.getJSON("./api-data/"+$routeParams.json_url, function(json){
        $scope.data = json;
         console.log('JSON--',$scope.data);
       $scope.processdata();
  });

/检索要重定向的 URL/

这就是我尝试获取数据的方式,但是当我控制台 $routeparams 有数据时 -> 它有需要的 url 但是当我与“json url”连接时,它在控制台中显示“无法加载资源:服务器响应状态为 404(未找到)”和“未定义”

我正在分享我的 app.js

app.js

App.config(['$routeProvider',function($routeProvider, $routeParams) {

            $routeProvider

    .when('/base-product/:json_url?', {
                    templateUrl :'templates/base_product.html',
                    controller  :'BaseProductController'
                })      

我的菜单.html

这是我单击此菜单中的特定链接时的菜单,它应该动态重定向到关联的 json 文件

<ul id="submenu-2" class="collapse" >
                            <span ng-repeat="item in itemDetails">
                            <li><a href="#base-product?{{item.path}}" > {{item.title}}</a></li>
                            </span>

                        </ul>

我的action.json看起来像这样

[

   {
      "title":"View",
      "path":"actions/view.json",
      "urlpath":"view?segment=view",
      "apiPath":"api/view",
      "methodType":"post"

   },

    {
       "title":"Add",
      "path":"actions/add.json",
      "urlpath":"view?segment=add",
      "apiPath":"api/add",
      "methodType":"post"

   },

]

我编写了一个工厂来从 json 文件 (action.json) 获取数组值

App.factory('itemsFactory', ['$http', function($http){
  var itemsFactory ={
    itemDetails: function() {
      return $http(
      {
        url: "api-data/action.json",
        method: "GET",
      })
      .then(function (response) {
        return response.data;
        });
      }
    };
    return itemsFactory;

}]);


App.controller('SidenavItems_controller', ['$scope', 'itemsFactory', function($scope, itemsFactory){

    console.log("Loading json array name is working fine and tested in console")
  var promise = itemsFactory.itemDetails();

    promise.then(function (data) {
        $scope.itemDetails = data;
        console.log(data);
    });
    $scope.select = function(item) {
      $scope.selected = item;
    }
    $scope.selected = {};
}]);

帮我解决这个问题..提前致谢

最佳答案

您的网址参数错误,您不需要使用“?”标记。将其更改为

查看

<li><a href="#base-product/{{item.path}}" > {{item.title}}</a></li>

JS

.when('/base-product/:json_url', {...}

关于javascript - 如何在 Angular JS 中使用 $Routeparams 从 json 文件检索数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44128714/

相关文章:

javascript - 将敏感输入值分配给 Jquery 变量是否安全?

javascript - 使用javascript在同一个表格单元格中显示不同的图像

javascript - 多个 :not() with dynamic element attribute

angularjs - promise 解决后, View 中的数据未更新

javascript - 动态设置模板文件中隐藏字段的id

jquery:将图像包装在一个div中并将 float 从图像复制到div

javascript - 进一步生成 'one by one' 的随机元素生成集

javascript - AngularJS - html 中的范围变量语法

angularjs - 如何在网格布局中将 bootstrap 下拉菜单和其他菜单对齐?

javascript - 如何从 JSON 数组中获取集合