如何操作从ajax调用接收的数组数据

Question

So I am trying to populate a few cards from bootstrap with the information I get from an ajax call, the function for the call works and it's being logged so I can see the array of information coming back, now my question is how would I go about making that array I receive into a new array I can work with? possibly the var newPeopleArray?

 function startUp() { console.log("startup is running"); getPeople() } //var newPeopleArray = ????????? var getPeople = function () { var url = " TOOK OFF FOR THIS "; var settings = { cache: false , contentType: "application/json; charset=utf-8" , dataType: "json" , success: (function (data) { console.log(data, "success!") }) , error: (function () { console.log("error"); }) , type: "GET" , headers: { 'TOOK': 'OFF' } }; $.ajax(url, settings); } var renderNames = (peopleArray) => { for (let myIndex = 0; myIndex < peopleArray.length; myIndex++) { const currentName = peopleArray[myIndex]; console.log(currentName) } }

This is what I get back from the call

{item: {…}, isSuccessFul: true, transactionId: "6b155adf-4d2b-4beb-850d-d5405ec345a3"} item: pageIndex: 1 pageSize: 5 totalCount: 1000 totalPages: 200 pagedItems: Array(5) 0: {gender: "female", name: {…}, location: {…}, email: "christine.reyes@example.com", dob: "1982-06-21 02:25:03", …} 1: {gender: "male", name: {…}, location: {…}, email: "keith.morgan@example.com", dob: "1956-10-14 23:19:29", …} 2: {gender: "female", name: {…}, location: {…}, email: "carolyn.jensen@example.com", dob: "1979-01-08 10:26:48", …} 3: {gender: "female", name: {…}, location: {…}, email: "kathryn.silva@example.com", dob: "1980-07-19 11:36:25", …} 4: {gender: "female", name: {…}, location: {…}, email: "georgia.parker@example.com", dob: "1991-04-08 12:50:27", …} length: 5

I just want to get the name, email, and dob from the array that I get back and either make a new array which would be ideal or is there a way to fill up a bootstrap component with information directly from the ajax call?

Sorry if I don't make much sense with my question, pretty new to programming so sometimes it's hard to even ask a question. Thanksyoufor any help!

this is the only thing I have for the actual website from bootstrap

<div class="main container">

    <div class="row ">
        <div class="col-4">
            <div class="card first" style="width: 18rem;">
                <img src="" class="card-img-first" alt="">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text"> make up the bulk of
                        the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>

        <div class="col-4 ">
            <div class="card second" style="width: 18rem;">
                <img src="" class="card-img-second" alt="">
                <div class="card-body second">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text"> make up the bulk of
                        the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>

        <div class="col-4 ">
            <div class="card third" style="width: 18rem;">
                <img src="" class="card-img-third" alt="">
                <div class="card-body">
                    <h5 class="card-title">Card title</h5>
                    <p class="card-text"> make up the bulk of
                        the card's content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
        </div>
    </div>

</div>

Answer 1

If you are receiving JSON back as a string, then you will need to parse it back into shape.

let jsonData = JSON.parse( data );

//  example usage of the JSON object
if ( jsonData[0].gender === "female" ) {
    let firstGender = 1;
} else {
    let firstGender = 0;
}