Jquery response, only single object returned while loop fails

Question

I am trying to return an array of surnames from a json query to form part of a section which can be chosen by a user.

$.ajax({
url: 'https://reqres.in/api/users?page=1',
type: "GET",
success: function (response) {
    console.log(response);
    original = convState.current;
    State.current.next = State.newState({
       type: 'select',
       question: ['Please select'],
       answer: [{text: [response.data[0].last_name], value: 'true'}],
});

The current result only returns the one surname bluth from the json which can be found at https://reqres.in/api/users?page=1

If I try and add a loop to access the array, absolutely nothing happens. The html page just waits for something to happen, which never happens. Can some please help met rectify the loop, I am not sure where and how I should add it. I tried here, but then the page waits for nothing to ever happen.

    var len = data.length;
      for(var i=0;i<len;i++){
        answer: [{text: [response.data[i].last_name], value: 'true'}],
    }

GLJ · Accepted Answer · 2020-09-30 21:08:50Z

2

I would check your console log to see if any errors are occurring. The provided for loop did not work for me. However, the AJAX query works and I am able to loop through the array by modifying your for loop. Look at my example code.

EDIT: I understand what is happening in your code. You tried implementing a for loop within creating an object (which does not work). My sample code aggregates all of the last names into an array and then uses that for creating a new state. I'm not sure if you wanted multiple new states, or one state with multiple answers.

$.ajax({
    url: 'https://reqres.in/api/users?page=1',
    type: "GET",
    success: function (response) {
        let data = response.data;
        let array = [];
        for(var i = 0; i < data.length; ++i) {
            let account = data[i];
            let info = {text: [account.last_name], value: 'true'};
            array.push(info);
        }
        console.log(array);
        // Now do something with the array...
        original = convState.current;
        State.current.next = State.newState({
            type: 'select',
            question: ['Please select'],
            answer: array
        }
});

Or if you would like to using the map function to simplify array creation, you can do the following.

$.ajax({
    url: 'https://reqres.in/api/users?page=1',
    type: "GET",
    success: function (response) {
        let data = response.data;
        let array = data.map((account) => Object.create({text: [account.last_name], value: 'true'}));
        console.log(array)
        // Now do something with the array...
        original = convState.current;
        State.current.next = State.newState({
            type: 'select',
            question: ['Please select'],
            answer: array
        }
    }
});

edited Sep 30, 2020 at 21:08

answered Sep 30, 2020 at 21:03

GLJ

1,1742 gold badges11 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Gerry Over a year ago

Thanks. Let me modify it quickly to my code and see how it works! Just a slightly off topic question, can I predefine last_name in a variable and the use it as let info = {text: [account.(var_name_here)] instead of having to hardcode last_name?

Gerry Over a year ago

and it worked!! Thanks man, see edit in my question with the screenshot. If you have any ideas on that variable, that would be a life saver.

GLJ Over a year ago

I believe I know what you mean. If you want to dynamically access properties in an object, use the indexor with a string as the key. For example: account.last_name becomes account["last_name"]. These are equivalent. Look at this link for more info: dmitripavlutin.com/access-object-properties-javascript

Gerry Over a year ago

Thanks. So what I want to do is to use html to ask user what he wants. So if user then inserts last_name it will display the list of surnames, if the user defines first_name it should define collect that. but I think it gets more complicated because if the user then selects a surname, the ajax variable should then change to the new value. Let's say smith which on submit will get another part of the ajax query. So pretty much need to update what the ajax call needs to collect from the link. In othwer words the last_name should not be hard coded as [account.last_name].

Gerry Over a year ago

I suppose that is quite a question so I would need ask a new question.. I will link it here.

|

Collectives™ on Stack Overflow

Jquery response, only single object returned while loop fails

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related