从AJAX读取JSON数据[重复]

Question

This question already has answers here:

                </div>
            </div>
                    <div class="grid--cell mb0 mt4">
                        <a href="/questions/20089473/how-to-output-a-javascript-variable-into-an-html-div" dir="ltr">How to 'output' a JavaScript variable into an HTML div</a>
                            <span class="question-originals-answer-count">
                                (5 answers)
                            </span>
                    </div>
            <div class="grid--cell mb0 mt8">Closed <span title="2017-05-08 12:52:22Z" class="relativetime">2 years ago</span>.</div>
        </div>
    </aside>

Consider:

 $.ajax({
        type: "POST",
        url: "/myurl",
        async: false,
        data: JSON.stringify({}),
        contentType: "application/json",
        complete: function (data) {
                var results = data["responseText"];
                alert(results)
        },
        error: function () {
              alert("Error")
        }
 });

The JSON returned:

{"jsonrpc": "2.0", "id": null, "result": "{\"ids\": [{\"id\": 1, \"name\": \"Messi\"}, {\"id\": 2, \"name\": \"Ronaldo\"}]}"}

How can I append the data in div like the following?

1 Messi

2 Ronaldo

</div>

Answer 1

Pick the ids property from your Ajax response, loop through it and prepare your required HTML structure using that info. In the end, insert this HTML string in your HTML page.

/*
    $.ajax({
        type: "POST",
        url: "/myurl",
        async: false,
        data: JSON.stringify({}),
        contentType: "application/json",
        complete: function (data) {
                      var response = data["responseText"];
                      var insertDatas = JSON.parse(response.result);
                      var htmlString = "";
                      insertDatas.ids.forEach(function( item ){
                          htmlString += '<li>'+item.name+'</li>';
                      });//forEach()

                      $("#players-list").html( htmlString );
                  },
                  error: function () {
                      alert("Error")
                  }
    });
*/

var response = {
  "jsonrpc": "2.0",
  "id": null,
  "result":
    {"ids":
      [
       {"id": 1, "name": "Messi"},
       {"id": 2, "name": "Ronaldo"}
      ]
    }
};

var htmlString = "";
response.result.ids.forEach(function(item){
    htmlString += '<li>' + item.name + '</li>';
});//forEach()

$("#players-list").html( htmlString );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ol id="players-list"></ol>

</div>