解析json數據排序反轉

我設法解析json數據並將這些數據循環到選擇選項標記中。但數據正在倒序排序。這是我的JSON文件：解析json數據排序反轉

{ 
    "items": [ 
    {"key": "First","value": 100}, 
    {"key": "Second","value": 200}, 
    {"key": "Last","value": 300} 
    ] 
}

，這是我的html文件

<script type="text/javascript"> 
     $(document).ready(function(){ 
     $.ajax({ 
      url:'example.json', 
      dataType:'json', 
      success:function(item){ 
      $.each(item['items'], function(i,n){ 
       option = '<option value="'+n['value']+'">'+n['key']+'</option>'; 
       $("#show-data").after(option); 
      }); 
      } 
     }); 
     }); 
    </script> 
    </head> 
    <body> 
    <select> 
     <option id="show-data" value="" selected disabled>Please select an item</option> 
    </select> 
    </body>

，這是結果：

是有辦法使數據進行排序是否正確？

來源

2016-12-07 Seventh St

我按照你的建議，但只有「最後」項目顯示@ kukkuz –

的問題是，因爲在每次迭代中插入新option元素直接after()第一位的，因此以往任何添加的前面。

爲了解決這個問題，而不是調用append()在select本身：

// dummy AJAX data 
 
var item = { 
 
    "items": [{ 
 
    "key": "First", 
 
    "value": 100 
 
    }, { 
 
    "key": "Second", 
 
    "value": 200 
 
    }, { 
 
    "key": "Last", 
 
    "value": 300 
 
    }] 
 
} 
 

 
// in AJAX callback 
 
$.each(item['items'], function(i, n) { 
 
    var option = '<option value="' + n['value'] + '">' + n['key'] + '</option>'; 
 
    $('select').append(option); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option id="show-data" value="" selected disabled>Please select an item</option> 
 
</select>

您還可以通過在一個單一的字符串製作的所有新的選擇和調用append()一旦提高這個性能：

var options = ''; 
$.each(item['items'], function(i, n) { 
    options += '<option value="' + n['value'] + '">' + n['key'] + '</option>'; 
}); 
$('select').append(options);

來源

2016-12-07 12:08:42

在使用.after()時，新元素會插入迭代中的元素之後。因此，以相反的順序完成。

您可以創建一個字符串，然後使用.after()

var options = ''; 
$.each(item['items'], function(i, n) { 
    options += '<option value="' + n['value'] + '">' + n['key'] + '</option>'; 
}); 
$("#show-data").after(options);

不過，我建議你到指定ID屬性select元素，那麼使用.append()

HTML

<select id="show-data"> 
    <option value="" selected disabled>Please select an item</option> 
</select>

腳本

$.each(item['items'], function(i, n) { 
    var options += '<option value="' + n['value'] + '">' + n['key'] + '</option>'; 
    $("#show-data").append(option); 
});

來源

2016-12-07 12:08:23 Satpal

你也可以做：

$.each(item['items'].reverse(), function(i,n){

來源

2016-12-07 12:09:37

解析json數據排序反轉

回答

相關問題