get values from json variable data with jquery or javascript

Question

The json output is some thing like: {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1}

I need to do an append with each of the received values. The numbers next to them are how many times they exist.

I know it will probably be something with "for each" value, but, since the values and keys of the json response are variable, it's difficult for me how to figure out the way to do it.

I will like that the append order depends on how big the number is. If it's bigger print it on the top, and so on...

for example:

<div id="values">
  <p>The value "more" is repeated 5 time(s).</p>
  <p>The value "apple" is repeated 3 time(s).</p>
  <p>The value "another" is repeated 1 time(s).</p>
  ...
</div>

Remember! The response can change, the response won't be always apple, another, more, volvo, audi and ford... It can CHANGE!

EDIT: I can do something with this, but, how do I order them with higher or lower values?

for (var key in interests) {
  if (interests.hasOwnProperty(key)) {
    console.log(key + " -> " + interests[key]);
  }
}

EDIT:

var data = {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1}; // initial data
var interestsValue = []; // data with values

for (var key in data){ interestsValue.push({ name: key, value: data[key] }); } // send data with values
interestsValue.sort(function(a, b){ return b.value - a.value; }); // sort values

console.log(interestsValue); // values ordered from bigger to smaller

Did you search a bit ? You just need to loop through an object : http://stackoverflow.com/questions/684672/how-do-i-loop-through-or-enumerate-a-javascript-object — Antoine Neff, Jan 29 '17 at 11:08

score 1 · Answer 1 · answered Jan 29 '17 at 11:11

First - convert the object to a valid array:

var data = {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1};
var arr = [];

for (var key in data)
{
   arr.push({ name: key, value: data[key] });
}

Then.... use that array with jQuery, angular, etc... to populate your elements

Enjoy :)

Hikmat Sijapati · Answer 2 · 2017-01-29T12:30:01.390

1

Like this.Loop through your objcet using jquery's $.each method Then append the html into your div with append method.

var obj= {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1};

text = "";
$.each(obj,function(index,element){
text +=" <p>The value " +index+ " is repeated "+ element + " time(s).</p>";
});
$("#values").append(text);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="values">
</div>

JS fiddle https://jsfiddle.net/uobedcf0/

See UPDATED Fiddle:

https://jsfiddle.net/u1kn6d6L/1/

edited Jan 29 '17 at 12:30

answered Jan 29 '17 at 11:15

Hikmat Sijapati

6,869
1
9
19

first take every numbers from your object into array.Then sort.Try – Hikmat Sijapati Jan 29 '17 at 11:18
hey, I've been trying, I can order them now but I can't append... Here's the jsfiddle, probably is something obvious I don't see... https://jsfiddle.net/u1kn6d6L/ – Quique Osuna García Jan 29 '17 at 11:54

user3755154 · Accepted Answer · 2017-01-29T12:30:31.493

0

As mention above first convert object into the array.

var data = {"apple":3,"another":1,"more":5,"volvo":1,"audi":1,"ford":1};
function sortByValue (data){
var dataArray=[];
for(var key in data){
dataArray.push({name:key ,value :data[key]});
}
dataArray.sort(function(a,b){return b.value- a.value}); //sort it in descreasing order
return dataArray;
}
var text="";
var objArray = sortByValue(data);
$.each(objArray,function(index,object){
text +=" <p>The value " +object.name+ " is repeated "+ object.value + " time(s).</p>";
});
$("#values").append(text)

edited Jan 29 '17 at 12:30

answered Jan 29 '17 at 11:56

user3755154

66
5

@QuiqueOsunaGarcía replace var ObjArray with var objArray and it will work – user3755154 Jan 29 '17 at 12:31

get values from json variable data with jquery or javascript

3 Answers3