JSON。解析Javascript无序选择

时间:2022-08-23 07:26:50

I receive from api a Json like this:

我从api Json接收到如下内容:

{
  "paises":{
    "145":"CHINA (53)",
    "150":"ESPAÑA (45)",
    "68":"HOLANDA (38)",
    "236":"RUMANIA (52)"
  }
}

List of countries always alwais is order alphabetic but when add to a select list show in disorder and order by id.Like this:

国家列表总是按字母顺序排列,但当添加到选择列表时,无序显示,按idis排序。

 "68":"HOLANDA (38)",
 "145":"CHINA (53)",
 "150":"ESPAÑA (45)",
 "236":"RUMANIA (52)"

This is a code:

这是一个代码:

   var datos = JSON.parse(data);

   $.each(datos.paises, function(id, valor) {
          $("#informe-id").append($('<option>', {
             value: id,
             text: valor,
          }));
   });

In my project I have this problem in more selects. In other list size is greater that 200, so that parse and short maybe it consumes a lot of resources. What is the best way to populate select keeping list in alphabetic order?

在我的项目中,我有更多的选择。在其他列表中,它的大小大于200,因此解析和简短可能会消耗大量资源。按字母顺序填充选择保持列表的最佳方式是什么?

Thank a lot

感谢很多

2 个解决方案

#1


2  

You can use Object.entries to convert the object into array. Use sort to sort it.

您可以使用对象。将对象转换为数组的项。使用sort对它进行排序。

Note: orderedDatos will be an array now and not an object. You might need to change something on your $.each

注意:orderedDatos将是一个数组,而不是一个对象。你可能需要改变一下你的$.each。

var data = '{"paises": {"145": "CHINA (53)","150": "ESPAÑA (45)","68": "HOLANDA (38)","236": "RUMANIA (52)"}}';
var datos = JSON.parse(data);

var orderedDatos = Object.entries(datos.paises).sort((a, b) => a[1].localeCompare(b[1]));

$.each(orderedDatos, function(id, valor) {
  console.log(valor[0], valor[1]); //Use valor[0] to get the key | Use valor[1] to get the value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Doc: Object.entries(), sort()

道格:Object.entries(),()

#2


1  

You could use Object.entries() it will return an array then you can use sort() method array using String.localeCompare() to get the required result.

可以使用Object.entries()返回一个数组,然后使用String.localeCompare()方法数组获取所需的结果。

DEMO

演示

var datos = {
  "paises": {
    "145": "CHINA (53)",
    "150": "ESPAÑA (45)",
    "68": "HOLANDA (38)",
    "236": "RUMANIA (52)"
  }
};

let paises = Object.entries(datos.paises).sort((a,b)=>a[1].localeCompare(b[1]));
$.each(paises, function(index, value) {
  $("#informe-id").append($('<option>', {
    value: value[0],
    text: value[1],
  }));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="informe-id"></select>

#1


2  

You can use Object.entries to convert the object into array. Use sort to sort it.

您可以使用对象。将对象转换为数组的项。使用sort对它进行排序。

Note: orderedDatos will be an array now and not an object. You might need to change something on your $.each

注意:orderedDatos将是一个数组,而不是一个对象。你可能需要改变一下你的$.each。

var data = '{"paises": {"145": "CHINA (53)","150": "ESPAÑA (45)","68": "HOLANDA (38)","236": "RUMANIA (52)"}}';
var datos = JSON.parse(data);

var orderedDatos = Object.entries(datos.paises).sort((a, b) => a[1].localeCompare(b[1]));

$.each(orderedDatos, function(id, valor) {
  console.log(valor[0], valor[1]); //Use valor[0] to get the key | Use valor[1] to get the value
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Doc: Object.entries(), sort()

道格:Object.entries(),()

#2


1  

You could use Object.entries() it will return an array then you can use sort() method array using String.localeCompare() to get the required result.

可以使用Object.entries()返回一个数组,然后使用String.localeCompare()方法数组获取所需的结果。

DEMO

演示

var datos = {
  "paises": {
    "145": "CHINA (53)",
    "150": "ESPAÑA (45)",
    "68": "HOLANDA (38)",
    "236": "RUMANIA (52)"
  }
};

let paises = Object.entries(datos.paises).sort((a,b)=>a[1].localeCompare(b[1]));
$.each(paises, function(index, value) {
  $("#informe-id").append($('<option>', {
    value: value[0],
    text: value[1],
  }));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="informe-id"></select>