如何从Json文件中检索数据并将其显示在HTML下拉列表中

how to retrieve data from Json file and displaying it in HTML dropdown...?

本文关键字：显示 下拉列表 HTML 数据 Json 文件 检索      更新时间：2023-09-26

嗨，我使用AngularJS开发了简单的Html页面，该页面在用户选择的下拉列表中显示制造商名称 相应的制造商ID将显示在下面的文本框中。我使用 ng-repeat 指令在 HTML 下拉列表中显示制造商名称，并使用 ng-model 指令显示选定的制造商 ID。

here is my HTML CODE 
<!DOCTYPE html>
<html ng-app="jsonapp">
<head>
<script src="angular.min.js"></script>
<title></title>
</head>
<body> 
<div ng-controller='JsonController'>
    <span>Please select a Manufacturer:</span>
     <li ng-model="Manufacturers" ng-repeat="Manufnames in Manufacturers" style="width:350px;">
            {{Manufnames.ManufacturerName}}
     </li>  
// here i wanted to Display Drop Down which will display Manufacturer Names
    <input type="text" /> //here i wanted to display correspondent Manufacturer ID 
</div>
<script>
    var app = angular.module('jsonapp', []);
    app.controller('JsonController', function ($scope, $http) {
        $http.get('Pipes.json') 
        .success(function (response) { $scope.Manufacturers = response.Pipesmanuf; });
    });
    </script>
 // since i have stored both Json and HTML on Same Folder i am directly passing json filename to http.get() funtion to retrive data
</body>
</html> 
// I have stored both HTML File and  Json File in same folder My Json file contains following data:
{
"Pipesmanuf": [
    {
        "ManufacturerId": 1,
        "ManufacturerName": "Avonplast",
        "Products": "PIPES",
        "ManufacturerLogo": "C:'Users'Suprith'Desktop'Manufacturerlogos'Pipes'avonplast.jpg"
    },
    {
        "ManufacturerId": 2,
        "ManufacturerName": "BEC",
        "Products": "PIPES",
        "ManufacturerLogo": "C:'Users'Suprith'Desktop'Manufacturerlogos'Pipes'BEC.png"
    }
]
}

我是 Angular JS 的新手，请告诉我如何从 JSON 文件加载数据并使用 HTML 下拉列表或 HTML 列表显示它

首先，由于目录路径，您的 JSON 无效。反斜杠'是转义字符。这会导致分析失败。因此，只需将您的 JSON 更改为 

{  
   "Pipesmanuf":[  
      {  
         "ManufacturerId":1,
         "ManufacturerName":"Avonplast",
         "Products":"PIPES",
         "ManufacturerLogo":"C:''Users''Suprith''Desktop''Manufacturerlogos''Pipes''avonplast.jpg"
      },
      {  
         "ManufacturerId":2,
         "ManufacturerName":"BEC",
         "Products":"PIPES",
         "ManufacturerLogo":"C:''Users''Suprith''Desktop''Manufacturerlogos''Pipes''BEC.png"
      }
   ]
}

这样，您就可以转义转义字符。

除此之外，将列表放入下拉列表中几乎与您的列表循环完全相同：

<select>
    <option ng-repeat="Manufnames in Manufacturers">{{Manufnames.ManufacturerName}}</option>
</select>

普伦克：http://plnkr.co/edit/LXvFNZBVzCIZot96JhgP?p=preview

你应该看看官方教程：https://docs.angularjs.org/tutorial/step_01 。

他们做了类似的事情，特别是步骤11。

基本上，如果你想要一些漂亮且可重用的东西，你应该使用服务来请求文件中的数据。然后将此服务注入控制器并获取数据，然后将其显示在视图中。通过本教程，我认为您可以处理它。好看！

相关文章：