Question

我正在构建一个简单的应用程序，我正在执行Ajax请求以获取Json对象，并将其传递给html，基本上是一个自动售货机，在这种情况下我需要传递产品数量。

基本上我的问题是，我有一个html，我有8个div，并且在每个div我有产品数量的ap类，在javascript的另一边，我正在做一个ajax请求得到一个json对象，在这个对象中，我有8个属性，即每个p标签的8个数量。

这是我获取json的Ajax请求

$.ajax({
        url: " https://api.thingspeak.com/channels/xxxxxx/feeds",
        dataType: 'json',
        data: {
            api_key: apiKeyLeitura,
        },           
        success: function(data){
            var fields = data.feeds[0]; // todos os campos do objecto 
            delete fields.created_at; // eliminar propriedas desnecessárias como a data, é apenas importante neste momento a quantidade de produtos
            delete fields.entry_id; // elimina propriedade desnecessária
               //IMPORTANT THIS LOOP
                for(var f in fields){
                    console.log(fields[f]);
                }
        },
        error: function(xhr,error){
            console.log(xhr);
            console.log(error);
        }
    });

我需要知道的是，如何将字段[f]数据直接传递给我的类html，其中每个字段[i]应该对应于每个html [i]我的意思是，我得到的每个字段从json成功，应该直接对应html类循环，我该如何解决呢？

这里有一些我的HTML

 <div class="col-md-3 SeccaoProduto">
    <p>Coca Cola</p>
    <p>Quantidade Atual:</p>
    <p id="quantidadeCola" class="quantidadeProduto"></p>
 </div>
 <div class="col-md-3 SeccaoProduto">
     <p>Ice Tea</p>
     <p>Quantidade Atual:</p>
     <p id="quantidadeIceTea" class="quantidadeProduto"></p>
 </div>

我想将数据传递给每个col-md-3

中的最后一个p

我的代码是

 $(".quantidadeProduto").each(function(key,value){
                $(this).html(fields[key]);
                console.log(fields[key]);
            });

我可以使用一个值匹配每个类，但是这个字段更适合键，有没有办法可以根据键获取属性？

Answer 1

您必须使用像Marko，Jade或EJS这样的模板引擎

Answer 2

好吧，你可以给你的每个p标签一个特殊的id来获得quainity。例如，在第一个div中，您将拥有标签p，其id =“quantity1”，第二个div标签为p，id =“quantity2”...... 然后，当你通过你的JSON迭代时，你只需找到id为“quantity”的p标签+你的迭代器

Answer 3

您可以使HTML ID与数据键匹配，然后只需进行简单插入即可。

为您的可口可乐数量p <p id="coca-cola">

添加ID

这是你的ajax循环的一些假定代码：

for (var f in data){

    document.getElementById(f).textContent = 'Quantidade Atual:' + data[f]

}

您甚至可以更进一步，并在您的ajax调用中动态附加<p>

Answer 4

如果没有看到正在迭代的数据的例子，很难知道。我假设你正在使用Jquery，因为你打电话给$.ajax()。如果您定义从服务返回的数据结构，作为保存键名和值的对象，您可以使用Jquery然后找到具有该id的元素并设置该元素的文本，即。

数据：[{key:'quantidadeCola', qty:5}, {key:'quantidadeIceTea', qty: 10}]

这将允许您在循环中使用Jquery，如下所示：

for(var f in fields){
    $('#'+f.key).text(f.qty);
}

话虽如此，你应该研究已经保持html DOM和javascript对象模型一致的模型绑定框架。您可以选择许多框架：AngularJS，Angular 2，Ember，Backbone，Knockout等。

循环通过类html并传递一个json属性

4 个答案: