Javascript 如何加载特定天气条件下的图标？（AngularJS）

我正在开发一个天气应用程序作为个人项目。我已经完成了应用程序的基础，我向Yahoo Weather API发出HTTP get请求，它返回我想要的数据

然而，我被困在下一步，让图标加载当前条件

我在“models”文件夹中设置了一个JSON文件，它如下所示：

[

 {
    "code": 32,
    "icon": "img/sunny.png",
    "text": "Sunny"
 },

 {
    "code": 26,
    "icon": "img/cloudy.png",
    "text": "Cloudy"
 }

]

这是我在主控制器中的请求（不确定是否正确）

在视图中，我使用了ng if和ng src指令的组合来尝试加载图标。再说一次，我不知道我做得对

<img ng-if="main.place.item.conditons.code === main.conditions.code" ng-src="{{main.conditions.icon}}">

---

有什么办法可以让它工作吗？我走对了吗？谢谢你的回答

您说JSON被正确检索，所以问题在于您试图使用数组作为带有ng src标记的对象。您有{main.conditions.icon}，假设conditions是您检索到的JSON，您必须指定一个数组索引，但是，您可能不想这样做，因为您无法知道什么索引与什么天气代码相关

解决这个问题的方法有两种。首先，如果可能，您可以将JSON数据更改为以下形式的对象：

{
    "32": {
        "icon": ...,
        "text": ...
    },
    "26": {
        "icon": ...,
        "text": ...
    }
}

如果能够执行此操作，则可以将条件用作对象并执行以下操作：

<img ng-src="{{main.conditions[main.place.item.conditions.code].icon}}">

---

当然，这是假设“main.place.item”对象中的conditions属性也不是数组，如果是这样，您将不得不进一步调整。另外，我假设您输入了一个拼写错误，因为您的问题中使用了ng if属性，条件拼写错误。

会发生什么？错误？ng属性不需要花括号。您可以从ng src中删除它们。这可能是你的问题的一部分。看起来你也有一些打字错误。检查控制台是否有错误。@ribsies，我相信

ngsrc

仍然需要按照。还有@DevonAero，你可以做很多事情，但我不一定认为这是最好的方法。控制台没有给我任何错误，但图标不会加载。@Tom谢谢！我要试试看！

标签是否显示没有img？或者根本没有生成``标记？我猜你在用ng repeat？也许检查一下拼写错误？哈哈，是的，我修正了拼写错误。再次感谢所有的建议，我最终会让它工作的。

<img ng-src="{{main.conditions[main.place.item.conditions.code].icon}}">