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

Answer 1

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

Answer 2

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/

Answer 3

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)