My array that I filled with my ajax request result will not appears in my react components unordered list.
When I do a console.log of the array I get:
[]
0
:
"Career"
1
:
"Middle College for Technology Careers"
2
:
"Careers New Zealand"
3
:
"Careers for Veterans 200"
4
:
"Northside Health Careers High School"
5
:
"Barbie's careers"
6
:
"Edward M. Kennedy Academy for Health Careers"
7
:
"The Careers Group, University of London"
8
:
"Careers advisor"
9
:
"Careers advisory service"
length
:
10
proto
:
Array[0]
When I call this array inside my react component it does not render. Here is my code below.
HTML
JS
// array that the titles will be loaded into
var response = [];
$.ajax({
// request type ( GET or POST )
type: "GET",
// the URL to which the request is sent
url: "https://en.wikipedia.org/w/api.php?",
// data to be sent to the server
data: {
action: "query",
format: "json",
list: "search",
srsearch: "careers",
srwhat: "text",
srprop: "timestamp",
continue: "",
},
// The type of data that you're expecting back from the server
dataType: "jsonp",
crossDomain: true,
// Function to be called if the request succeeds
success: function (jsondata) {
for (var i = 0; i < jsondata.query.search.length; i++) {
//console.log( jsondata.query.search[i].title );
//pushes each result into the array named list
response.push(jsondata.query.search[i].title);
}
},
});
console.log(response);
var App = React.createClass({
render: function () {
//var title = list;
return (
Hello World
The world is full of oppurtunity
- {response[0]}
- Freedom
- Lozve
- Money
);
},
});
ReactDOM.render(, document.getElementById("content"));
Here is a link to my code pen where all my code is, http://codepen.io/vhall_io/pen/vKQrQN/ . I inserted response[0] into the first li tag and it will not render. Please help me render this.