将数组中的值插入到不同的span标记中

Question

我有一个数组如下：

[{
    "category_type": 1,
    "category": 2,
    "name": "gut",
    "description": "bg",
    "registered_location": "1234 1234",
    "current_location": null,
    "contact_person": 4046,
    "barcode": "25757767",
    "nfc_tag_id": "44444543",
    "unit_of_measure": "crate",
    "date_added": "2014-11-13",
    "status": 1
}]

我能够遍历它并获得所有这样的值：

$.each(data, function(key, object){
    $.each(object, function(key, value){
        console.log(value);
    })
})

我有一定数量的跨度，我希望从不同的价值观中获取他们的文本。跨度如下：

<p>Category Type: <span></span></p>
<p>Category: <span></span></p>
<p>Name: <span></span></p>
<p>Description: <span></span></p>
<p>Registered Location: <span></span></p>
<p>Current Location: <span></span></p>
<p>Contact Person: <span></span></p>
<p>Barcode: <span></span></p>
<p>NFC Tag ID: <span></span></p>
<p>Unit of measure: <span></span></p>
<p>Date Added: <span></span></p>
<p>Status: <span></span></p>

我希望上面的所有空跨度从我上面得到的JSON值中获取它们的文本。我怎样才能做到这一点？

Answer 1

实现所需内容的通常方法是使用类或ID标记每个段落，例如

<p id="category_type">Category Type: <span></span></p>
<p id="category">Category: <span></span></p>
<p id="name">Name: <span></span></p>
...

然后，让我们说data是您的原始数组，obj = data[0]包含您要使用的键/值对。然后你可以做类似

的事情

$.each(obj, function(key, value) {
    // $('#category_type') selects the element with id "category_type", etc.
    $('#' + key).find('span').text(value);
});

现在，这要求您能够控制原始HTML（例如，如果您是从服务器上的模板生成它）。如果您无法控制HTML，那么您将不得不做一些更糟糕的事情，您可以解析段落的内容以确定哪个数据值对应于它。例如，

$('p').each(function() {
    var txt = $(this).text(); // `this` is the paragraph element
    var key = txt.trim().toLowerCase().replace(':', '').replace(' ', '_');
    // if `txt` is "Category Type: ", then `key` should be "category_type", etc.
    $(this).find('span').text(obj[key]);
});

Answer 2

介绍Handlebars和JavaScript模板！

首先我们创建一个模板

var products = {'products': [yourDataArray] };
var template = "{{#each products}}" + //each iteration will loop over a product
               "<span>{{category_type}}</span>" + //just keep on adding spans to this template.
               "{{/each}}";

var compiledTemplate = Handlebars.compile(template);
var htmlFromTemplate = compiledTemplate(yourData);

现在只需将htmlFromTemplate附加到您的容器中。

$('.myContainer').append(htmlFromTemplate);

这是完全未经测试的，但应该有用，或者至少提供正确方向的提示。

Answer 3

据我所知，你有一组JSON个对象。并且您尝试遍历数组并使用其属性访问对象值。如果是这样，这将是实施：

// ARRAY OF JSON OBJECTS
var data = [{"Name":"foo"},{"Name":"bar"}];    

// YOUR LOOP
$.each(data, function(key, value){
    $('#target').append("<p>Name:<span>" + value.Name + "</span></p>");
    // AND SO ON...
});

这将产生如下结果：

<p>Name:<span>foo</span></p>
<p>Name:<span>bar</span></p>

这应该这样做。我希望这就是你要找的东西。

Answer 4

循环遍历所有p，并对其执行以下操作：获取文本，替换<span></span>并修剪它，因此只需从中获取文字：Category Type: 。

使用此方法，替换:字符，将其转换为小写，并将空格替换为_字符。

然后您将获得密钥，例如：category_type，然后您可以在JSON上使用该密钥。

获取数组值，并将其放入$(this).find('span');

Answer 5

您可以将p标记包含在某些div中，然后使用.eq()

 var counter = 0;
 $.each(object, function(key, value){
    $('.container p').eq(counter).children('span').html(value);
    counter++;
 })

UPD 正如GuyT注意到的那样，订单可能会改变，所以你可以试试smth

 $.each(object, function(key, value){
    var str = key.split("_").map(function(elm){
       return elm.charAt(0).toUpperCase() + elm.slice(1);
    }).join(" ");
    $('.container p:contains("'+str+'")').children('span').html(value);
 })

Fiddle显示如何选择所需的p代码。

Answer 6

var obj = array[0], index = 0;

// Also you can use jQuery each function
for(var key in obj){
    if(obj.hasOwnProperty(key)){
        var value = obj[key];
        $('p').eq(index++).find('span').text(value);
    }
}

＆＃13;

＆＃13;

var array = [{
    "category_type": 1,
    "category": 2,
    "name": "gut",
    "description": "bg",
    "registered_location": "1234 1234",
    "current_location": null,
    "contact_person": 4046,
    "barcode": "25757767",
    "nfc_tag_id": "44444543",
    "unit_of_measure": "crate",
    "date_added": "2014-11-13",
    "status": 1
}], obj = array[0], index = 0;

// Also you can use jQuery each function
for(var key in obj){
    if(obj.hasOwnProperty(key)){
        var value = obj[key];
        $('p').eq(index++).find('span').text(value);
    }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Category Type: <span></span></p>
<p>Category: <span></span></p>
<p>Name: <span></span></p>
<p>Description: <span></span></p>
<p>Registered Location: <span></span></p>
<p>Current Location: <span></span></p>
<p>Contact Person: <span></span></p>
<p>Barcode: <span></span></p>
<p>NFC Tag ID: <span></span></p>
<p>Unit of measure: <span></span></p>
<p>Date Added: <span></span></p>
<p>Status: <span></span></p>

＆＃13;

＆＃13;

＆＃13;

Answer 7

可能的方法是使用$.each。首先，遍历对象并将值保存在临时数组中。之后，您会在$.each {。}}上执行<span>。

var obj = {
    "category_type": 1,
    "category": 2,
    "name": "gut",
    "description": "bg",
    "registered_location": "1234 1234",
    "current_location": null,
    "contact_person": 4046,
    "barcode": "25757767",
    "nfc_tag_id": "44444543",
    "unit_of_measure": "crate",
    "date_added": "2014-11-13",
    "status": 1 
};

var temp = []; 

$.each(obj, function(key, value){
    temp.push(value); 
});

$.each($('span'), function( index ){
    $( this ).html(temp[index]); 
});

请参阅fiddle。

---

更好的解决方案是使用ids。将Category Type范围设为category_type，并映射值。查找id并获取其值。

<强> HTML <p>Category Type: <span id="category_type"></span></p>等等

$.each(obj, function(key, value){
    $( '#' + key).html(value);
});

这种方法要好得多，因为如果值以其他顺序返回，它们仍将被放置在正确的范围内。

检查fiddle。

Answer 8

你可以浏览所有这样的span元素：

$('span').each(function() {
    //some code to insert data into span
});

或者您可以为每个跨度添加与索引名称相同的ID并为其添加值。

var index, value;
for(index in data) {
    value = data[index];
    $('#' + index).html(value);
}

Answer 9

试试这个：

var txt = '';
$.each(data, function (key, object) {
    $.each(object, function (key, value) {
        if (key.indexOf('_') !== -1) {
            var c1 = key.split('_')[0].toString().charAt(0).toUpperCase() + key.split('_')[0].toString().slice(1);
            var d1 = key.split('_')[1].toString().charAt(0).toUpperCase() + key.split('_')[1].toString().slice(1);
            txt = c1 + ' ' + d1;
            console.log(txt);
            $('p:contains(' + txt + ':)').find('span').text(value);
        } else {
            txt = key.charAt(0).toUpperCase() + key.slice(1);
            $('p:contains(' + txt + ':)').find('span').text(value);
        }
    });
});

结帐以下演示：

Demo @ Fiddle