Insert values from an array into different span tags

The usual way to achieve what you want is to tag each paragraph with a class or id, e.g.

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

Then, let's say data is your original array, and obj = data[0] contains the key/value pairs you want to use. You can then do something like

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

Now, this requires you to be able to control the original HTML (e.g. if you are generating it from a template on the server). If you do not have control over the HTML, you will have to do something a bit more hacky, where you parse the contents of the paragraph to determine which data value corresponds to it. For example,

$('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]);
});

Loop throught all the p, and do the following on it: get the text of it, replace <span></span> and trim it, so just get the text from it like: Category Type:.

With this, replace the : character, convert it to lowercase, and replace the spaces to _ character.

Then you will have the key, like: category_type, and then you can use that on your JSON.

Get the array value, and put it in the $(this).find('span');

Introducing Handlebars and JavaScript templating!

First we create a template

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);

Now just append the htmlFromTemplate to your container.

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

This is completely untested, but should work, or at least provide a hint in the right direction.

From what I understand, you have an array of JSON objects. And your trying to loop through the array and access the objects values using their attributes. If so this would be the implementation:

// 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...
});

This will Result in something like this:

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

This should do it. I hope this was what you were looking for.

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);
    }
}

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);
    }
}

<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>

A possible approach would be to use $.each. First you loop through the object and save the values in a temporary array. Afterwards you do an $.each on every <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]); 
});

See the fiddle.

A better solution would be to use ids. Give your Category Type span an id of category_type and map the values. Look up for the id and take it's value.

HTML <p>Category Type: <span id="category_type"></span></p> and so on

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

This approach is much better because if the values would come back in an other order they still will be placed in the right span.

Check the fiddle.

You can go throuch all span elements like this:

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

Or you might add ids to each span which are same as index name and add values to it.

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

Try this:

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);
        }
    });
});

checkout the demo below:

Demo @ Fiddle