JavaScript parse JSON and create Key Value array from that

Question

i have simple json format like with this format:

{
    "Template": [
        {
            "ID": "856",
            "name": "users",
            "Template_Id": 0
        },
        {
            "ID": "857",
            "name": "avatars",
            "Template_Id": 1
        },
        {
            "ID": "858",
            "name": "emails",
            "Template_Id": 2
        }
    ]
}

now i'm trying to parse it and create key value array such as:

var sArray = {856:users, 857:avatars, 858:emails};

my code is not correct for create this array after parse json and i get this error:

Message: TypeError: obj.Template.name is undefined

My code is this:

    var obj = JSON.parse(jsonText);
    var count_templates = obj.Template.length;
    var template_array;

    /* Length is not static */
    for( i=0; i < count_templates; i++){
        id = obj.Template.ID;
        template_array[id] =  obj.Template.name;
    }
    for(var key in template_array)
    {
        console.log("key " + key + " has value " + template_array[key]);
    }

Can you make clear what output did you want ? Either var sArray = {856:users, 857:avatars, 858:emails} ? Or ["856:users", "857:avatars", "858:emails"] ? — intekhab
– intekhab, Commented Sep 7, 2015 at 5:52

Phil · Accepted Answer · 2015-09-07 05:32:17Z

1

I'd use a simple reduce operation on the Template array.

var obj = {
    "Template": [
        {
            "ID": "856",
            "name": "users",
            "Template_Id": 0
        },
        {
            "ID": "857",
            "name": "avatars",
            "Template_Id": 1
        },
        {
            "ID": "858",
            "name": "emails",
            "Template_Id": 2
        }
    ]
};

var sArray = obj.Template.reduce(function(o, tpl) {
        o[tpl.ID] = tpl.name;
        return o;
    }, {});

document.getElementById('out').innerHTML = JSON.stringify(sArray);

<pre id="out"></pre>

answered Sep 7, 2015 at 5:32

Phil

166k25 gold badges265 silver badges269 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

score 1 · Accepted Answer · 2015-09-07 07:53:27Z

1

Using ES6:

Object.assign({}, ...data.Template.map(elt => ({[elt.ID]: elt.name})));

This maps the elements of data.Template into little objects each with one key-value pair, where the key is the element ID (using ES6 computed property names), and the value is the name. Then it feeds all these objects as parameters (using the ... spread operator) to Object.assign, which merges them together.

{ '856': 'users', '857': 'avatars', '858': 'emails' }

Using Underscore

On a completely different note, if you are amenable to using Underscore, then

_.object(_.pluck(obj.Template, 'ID'), _.pluck(obj.Template, 'name'))

edited Sep 7, 2015 at 7:53

answered Sep 7, 2015 at 5:59

user663031

1 Comment

A.T. Over a year ago

it seems interesting can you please share url where i can read about ES6 lambda expressions

ARIF MAHMUD RANA · Accepted Answer · 2015-09-07 05:27:56Z

0

Change this to

   for( i=0; i < count_templates; i++){
      id = obj.Template.ID;//Here you are not actually accessing the array index element
      template_array[id] =  obj.Template.name;//Here you are not actually accessing the array index element
   }

   for( i=0; i < count_templates; i++){
      id = obj.Template[i].ID;
      template_array[id] =  obj.Template[i].name;
   }

answered Sep 7, 2015 at 5:27

ARIF MAHMUD RANA

5,2063 gold badges39 silver badges58 bronze badges

Comments

intekhab · Accepted Answer · 2015-09-07 05:30:11Z

0

Try this

var data = {
    "Template": [
        {
            "ID": "856",
            "name": "users",
            "Template_Id": 0
        },
        {
            "ID": "857",
            "name": "avatars",
            "Template_Id": 1
        },
        {
            "ID": "858",
            "name": "emails",
            "Template_Id": 2
        }
    ]
};


var temp = data.Template;
var res = {};
for (var i = 0; i < temp.length; i++) {
    res[temp[i]['ID']]  =  temp[i]['name'];
}

console.log(res);

answered Sep 7, 2015 at 5:30

intekhab

1,6162 gold badges15 silver badges19 bronze badges

Comments

Braj · Accepted Answer · 2015-09-07 05:38:15Z

0

It's very simple. First of all as per sample output mentioned in your post sArray is not an array. It's an object.

Steps:

Fisrt convert the actual JSON text into JSON object
Get Template array from parsed JSON object
Iterate Template array and create a new JSON object as expected

Sample code:

  var jsonText = '{"Template" : [{"ID":"1","name":"a"},{"ID":"2","name":"b"}]}';
var obj = JSON.parse(jsonText);
var arr = obj["Template"];

var sArray = {};
for(var i = 0; i < arr.length; i++) {
    var a = arr[i];
    sArray[a["ID"]] = a["name"];
}
document.write(JSON.stringify(sArray));

answered Sep 7, 2015 at 5:38

Braj

46.9k5 gold badges63 silver badges77 bronze badges

Comments

user1090751 · Accepted Answer · 2015-09-07 05:42:13Z

0

First change the variable type of template_array i.e

var template_array=[];

and then iterate by using obj.Template[i] not obj.Template. Here is working code:

var obj = JSON.parse(jsonText);
var count_templates = obj.Template.length;
var template_array=[];

/* Length is not static */
for( i=0; i < count_templates; i++){
    id = obj.Template[i].ID;
    template_array[id] =  obj.Template[i].name;
}
for(var key in template_array)
{
    console.log("key " + key + " has value " + template_array[key]);
}

answered Sep 7, 2015 at 5:42

user1090751

3361 silver badge11 bronze badges

Comments

Muhammad Usman · Accepted Answer · 2015-09-07 05:44:44Z

0

you can do by using reduce function

var arr = {
   "Template": [
    {
        "ID": "856",
        "name": "users",
        "Template_Id": 0
    },
    {
        "ID": "857",
        "name": "avatars",
        "Template_Id": 1
    },
    {
        "ID": "858",
        "name": "emails",
        "Template_Id": 2
    }
]
};
 var data = arr["Template"].reduce(function (output , val){ 
   output[val.ID] = val.name;
   return output;
}, {});

 console.log(data)

edited Sep 7, 2015 at 5:44

answered Sep 7, 2015 at 5:36

Muhammad Usman

1,3625 gold badges19 silver badges35 bronze badges

1 Comment

Phil Over a year ago

This outputs {857: "avatars", 858: "emails", ID: "856", name: "users", Template_Id: 0} because you have omitted the initialValue argument

A.T. · Accepted Answer · 2015-09-07 05:45:15Z

0

using map function

var arr = {};
data.Template.map(function(item,i){ 
   if(!!item.name && !!item.ID) //check if properties are valid
             arr[item.ID] = item.name;
});

return Object {856: "users", 857: "avatars", 858: "emails"}

http://jsfiddle.net/arunthakur14/hjgvkvLu/

answered Sep 7, 2015 at 5:45

A.T.

26.7k8 gold badges50 silver badges68 bronze badges

Comments

Frederik.L · Accepted Answer · 2015-09-07 08:19:54Z

0

Yet another solution. The generic case is:

var arr = Object.keys(obj).map(function(k) {
    var o = {};
    o[obj[k].ID] = obj[k].name;
    return o;
});

You can modify this pattern to suit your need. Here, k is the current key being visited and obj is your data.

Update: now returns json object

edited Sep 7, 2015 at 8:19

answered Sep 7, 2015 at 5:57

Frederik.L

5,6202 gold badges33 silver badges41 bronze badges

1 Comment

user663031 Over a year ago

This returns an array of strings, whereas he seems to want an object.

Mark C. · Accepted Answer · 2015-09-07 05:54:54Z

-1

Something like this:

var data = {
    "Template": [
        {
            "ID": "856",
            "name": "users",
            "Template_Id": 0
        },
        {
            "ID": "857",
            "name": "avatars",
            "Template_Id": 1
        },
        {
            "ID": "858",
            "name": "emails",
            "Template_Id": 2
        }
    ]
};

var output = [];

data.Template.forEach(function(item){
    output.push(item.ID + ":" + item.name); 
});

Although you may want to check if the object has the properties you're looking for first, but you get the idea.

Edit : Just noticed you wanted an output of type array. (even though you have {} surrounding your array. In this scenario, I would use map.

data.Template.map(function(item){
    output.push(item.ID + ":" + item.name); 
});

Thanks to @torazaburo for keeping me honest and making me re-read the question.

edited Sep 7, 2015 at 5:54

answered Sep 7, 2015 at 5:34

Mark C.

6,5004 gold badges39 silver badges74 bronze badges

3 Comments

user4790312 Over a year ago

i like your post with data.Template.forEach(). thanks

Mark C. Over a year ago

No problem. Glad I could help. Note the support for this ES5 method : caniuse.com/#search=foreach

user663031 Over a year ago

Why would you not use map? Anyway, this will output a string, which is almost certainly not what you want.

Collectives™ on Stack Overflow

JavaScript parse JSON and create Key Value array from that

10 Answers 10

Comments

Using Underscore

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

Comments

Using Underscore

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related